import { Table } from '@grid-table/view'
import { useStore } from '@einfach/react'
import type { ColumnType } from '@grid-table/view'

const columns: ColumnType[] = [
  { title: 'Name', dataIndex: 'name', width: 150, key: 'name' },
  { title: 'Age', dataIndex: 'age', width: 100, key: 'age' },
  { title: 'Email', dataIndex: 'email', width: 250, key: 'email' },
]

const data = [
  { id: 1, name: 'John', age: 28, email: 'john@example.com' },
  { id: 2, name: 'Jane', age: 32, email: 'jane@example.com' },
]

function App() {
  const store = useStore()
  return (
    <Table
      store={store}
      columns={columns}
      dataSource={data}
      idProp="id"
      rowHeight={36}
      style={{ width: '100%', height: 500 }}
    />
  )
}