DataGrid

import { DataGrid, DataGridPagination } from '@saas-ui/pro'

function ListPage() {
  const columns = React.useMemo(() => {
    return [
      {
        accessorKey: 'name',
        header: 'Name',
        size: 200,
      },
      {
        accessorKey: 'email',
        header: 'Email',
      },
      {
        accessorKey: 'company',
        header: 'Company',
      },
      {
        accessorKey: 'country',
        header: 'Country',
      },
      {
        accessorKey: 'employees',
        header: 'Employees',
        isNumeric: true,
      },
      {
        id: 'action',
        disableSortBy: true,
        disableGlobaFilter: true,
        header: '',
        cell: () => (
          <>
            <Button size="xs">Edit</Button>
          </>
        ),
        size: 100,
      },
    ]
  }, [])
  return (
    <Page title="Customers" height="400px">
      <DataGrid
        columns={columns}
        data={dataTable.data}
        isSortable
        isSelectable
        isHoverable
      >
        <DataGridPagination />
      </DataGrid>
    </Page>
  )
}

function ListPage() {
  const [selections, setSelections] = React.useState([])

  const columns = React.useMemo(() => {
    return [
      {
        accessorKey: 'name',
        header: 'Name',
        size: 200,
      },
      {
        accessorKey: 'email',
        header: 'Email',
      },
      {
        accessorKey: 'company',
        header: 'Company',
      },
      {
        accessorKey: 'country',
        header: 'Country',
      },
      {
        accessorKey: 'employees',
        header: 'Employees',
        isNumeric: true,
      },
      {
        id: 'action',
        disableSortBy: true,
        disableGlobaFilter: true,
        header: '',
        cell: () => (
          <>
            <Button size="xs">Edit</Button>
          </>
        ),
        size: 100,
      },
    ]
  }, [])
  return (
    <Page
      title="Customers"
      height="400px"
      position="relative"
      overflow="hidden"
    >
      <BulkActions
        selections={selections}
        actions={
          <>
            <Button colorScheme="white" variant="subtle">
              Delete
            </Button>
          </>
        }
      ></BulkActions>
      <DataGrid
        columns={columns}
        data={dataTable.data}
        isSortable
        isSelectable
        isHoverable
        onSelectedRowsChange={setSelections}
      >
        <DataGridPagination />
      </DataGrid>
    </Page>
  )
}

function ListPage() {
  const [selections, setSelections] = React.useState([])

  const columns = React.useMemo(() => {
    return [
      {
        accessorKey: 'name',
        header: 'Name',
        size: 200,
        meta: {
          href: ({ id }) => `#customers/${id}`,
        },
      },
      {
        accessorKey: 'email',
        header: 'Email',
      },
      {
        accessorKey: 'company',
        header: 'Company',
      },
      {
        accessorKey: 'country',
        header: 'Country',
      },
      {
        accessorKey: 'employees',
        header: 'Employees',
        meta: {
          isNumeric: true,
        },
      },
      {
        id: 'action',
        disableSortBy: true,
        disableGlobaFilter: true,
        header: '',
        cell: () => (
          <>
            <Button size="xs">Edit</Button>
          </>
        ),
        size: 200,
      },
    ]
  }, [])
  return (
    <Page
      title="Customers"
      height="400px"
      position="relative"
      overflow="hidden"
      sx={{
        '& tbody tr:hover': {
          cursor: 'pointer',
        },
      }}
    >
      <BulkActions
        selections={selections}
        actions={
          <>
            <Button colorScheme="white" variant="subtle">
              Delete
            </Button>
          </>
        }
      ></BulkActions>
      <DataGrid
        columns={columns}
        data={dataTable.data}
        isSortable
        isSelectable
        isHoverable
        onSelectedRowsChange={setSelections}
        onRowClick={(row, e) => {
          // Find the first A and trigger a click.
          const link = e.currentTarget.querySelector('td a')
          link && link.click()
        }}
      >
        <DataGridPagination />
      </DataGrid>
    </Page>
  )
}

function ListPage() {
  const [selections, setSelections] = React.useState([])
  const [sort, setSort] = React.useState<SortingRule<ExampleData>[]>([])
  const [page, setPage] = React.useState(0)

  const { data } = useQuery(['customers', sort, page], () => {
    // fetch...
  })

  const columns = React.useMemo(() => {
    return [
      {
        accessorKey: 'name',
        header: 'Name',
        size: 200,
        meta: {
          href: ({ id }) => `#customers/${id}`,
        },
      },
      {
        accessorKey: 'email',
        header: 'Email',
      },
      {
        accessorKey: 'company',
        header: 'Company',
      },
      {
        accessorKey: 'country',
        header: 'Country',
      },
      {
        accessorKey: 'employees',
        header: 'Employees',
        meta: {
          isNumeric: true,
        },
      },
      {
        id: 'action',
        disableSortBy: true,
        disableGlobaFilter: true,
        header: '',
        cell: () => (
          <>
            <Button size="xs">Edit</Button>
          </>
        ),
        width: '100px',
      },
    ]
  }, [])
  return (
    <Page
      title="Customers"
      height="400px"
      position="relative"
      overflow="hidden"
      sx={{
        '& tbody tr:hover': {
          cursor: 'pointer',
        },
      }}
    >
      <BulkActions
        selections={selections}
        actions={
          <>
            <Button colorScheme="white" variant="subtle">
              Delete
            </Button>
          </>
        }
      />
      <DataGrid
        columns={columns}
        data={dataTable.data}
        isSortable
        isSelectable
        isHoverable
        onSelectedRowsChange={setSelections}
        onRowClick={(row, e) => {
          // Find the first A and trigger a click.
          const link = e.currentTarget.querySelector('td a')
          link && link.click()
        }}
        manualSortBy
        onSortchange={setSort}
        pageCount={data.total}
        initialState={{
          pageSize: 1,
        }}
      >
        <DataGridPagination onChange={({ pageIndex }) => setPage(pageIndex)} />
      </DataGrid>
    </Page>
  )
}

function InternalState() {
  const gridRef = useRef(null)

  return (
    <Page
      title="Customers"
      height="400px"
      toolbar={
        <Toolbar>
          <ToolbarButton
            onClick={() => {
              gridRef.current.toggleAllRowsSelected()
            }}
            label="Select all rows"
            variant="primary"
          />
        </Toolbar>
      }
    >
      <DataGrid
        instanceRef={gridRef}
        columns={dataGrid.columns.concat()}
        data={dataGrid.data.concat()}
        isSelectable
      />
    </Page>
  )
}

// Copy to: src/types/react-table-config.d.ts
export * from '@saas-ui/pro/src/data-grid/react-table-config.d'

interface ExampleData {
  id: string
  name: string
  email: string
}

const columns: Column<ExampleData>[] = [
  {
    accessorKey: 'id',
    header: 'Id',
  },
  {
    accessorKey: 'name',
    header: 'Name',
  },
  {
    accessorKey: 'email',
    header: 'Email',
  },
]

const data: ExampleData[] = [{
  {
    id: 1,
    name: 'TaShya Charles',
    email: 'urna.nec.luctus@icloud.couk'
  },
  {
    id: 2,
    name: 'Donovan Mosley',
    email: 'lacinia.mattis.integer@icloud.couk',
  },
}]

<DataGrid<ExampleData> columns={columns} data={data} />