DataTable

View Source

Organize any type of data into rows and columns.

Collapsible subrows

HEADER

SIDEBAR

First Name

Last Name

Age

Address

Other

Isabella

Hand

57533

Dorian Turnpike Pouros Divide, North Lillian 50651

Lupe72@gmail.com

Kozey - Franecki (Ergonomic human-resource frame)

Ara

Gibson

52854

Daniel Run Armstrong Locks, Durganshire 09934-6858

Bailey_Mraz@gmail.com

Casper, Wilderman and Jakubowski (Operative motivating infrastructure)

Reid

Dicki

14665

Bogan Parks Dariana Isle, New Tanya 05752-9971

Gerda54@gmail.com

Smith - Hegmann (Secured analyzing migration)

Benjamin

Bode

34440

Bechtelar Corner Tyrique Wells, Port Sheldonshire 36850

Joe.Conn@yahoo.com

Ruecker - Brown (Future-proofed homogeneous complexity)

Brandi

Bednar

37156

Schaefer Shoals Alison Curve, New Carmelo 03351-3915

Oswaldo.Bergnaum65@gmail.com

Hills - Skiles (Decentralized non-volatile attitude)

Uriel

Terry

94931

Bernadine Common Haley Isle, Lake Jayneside 64928

Myrtie78@yahoo.com

Hermiston, Konopelski and Rath (Function-based empowering leverage)

Colby

Bechtelar

37376

Sharon Pike Jalyn Turnpike, Lake Hassan 65440

Edgar_Buckridge@hotmail.com

Murray, Nikolaus and Welch (Progressive cohesive model)

Lura

Cormier

97441

Dooley Green Claud Common, Lake Oscar 54080-3233

Hector.Towne@yahoo.com

Emard, Schaefer and Thompson (Configurable zero administration approach)

Freida

Hackett

8218

Auer Curve Krajcik Unions, Marianoburgh 21209

Alphonso_Jaskolski12@yahoo.com

Shields, Hilll and Heathcote (Down-sized analyzing solution)

Anne

Stark

89328

Rempel Locks Strosin Divide, New Odessa 47090-1481

Abdiel_Weber@hotmail.com

Gorczany Group (Polarised object-oriented standardization)

function getData() {
  return generateFakeData(
    (faker) => ({
      id: faker.random.uuid(),
      avatar: faker.image.avatar(),
      firstName: faker.name.firstName(),
      lastName: faker.name.lastName(),
      age: faker.random.number(),
      email: faker.internet.email(),
      streetAddress: faker.address.streetName(),
      streetName: faker.address.streetName(),
      city: faker.address.city(),
      zipCode: faker.address.zipCode(),
      companyName: faker.company.companyName(),
      catchPhrase: faker.company.catchPhrase(),
      checked: faker.random.boolean(),
      subData: generateFakeData(
        (faker) => ({
          id: faker.random.uuid(),
          avatar: faker.image.avatar(),
          firstName: faker.name.firstName(),
          lastName: faker.name.lastName(),
          id: faker.random.number(),
          email: faker.internet.email(),
          companyName: faker.company.companyName(),
          catchPhrase: faker.company.catchPhrase(),
        }),
        Math.floor(Math.random() * 6) + 1
      ),
    }),
    10
  )
}

const CheckboxContext = React.createContext(null)

function getColumns(showCheckboxColumn) {
  let columns = [
    {
      id: 'first-name',
      header: 'First Name',
      cell: 'firstName',
      sticky: true,
      sortable: true,
    },
    {
      id: 'last-name',
      header: 'Last Name',
      cell: 'lastName',
      sortable: true,
      defaultSortDirection: 'DESC',
    },
    {
      header: 'Age',
      cell: 'age',
      subCell: 'id',
      sortable: true,
      id: 'age',
    },
    {
      header: 'Address',
      cell: (rowData) =>
        `${rowData.streetAddress} ${rowData.streetName}, ${rowData.city} ${rowData.zipCode}`,
      subCell: null,
      sortable: true,
      id: 'address',
    },
    {
      header: 'Email',
      cell: 'email',
    },
    {
      header: 'Other',
      cell: (rowData) => `${rowData.companyName} (${rowData.catchPhrase})`,
    },
  ]

  if (showCheckboxColumn) {
    columns = [
      {
        header: () => (
          <CheckboxContext.Consumer>
            {({ anyCheckedRows, allRowsChecked, handleCheckboxAll }) => (
              <DataTable.CheckboxCell
                checked={allRowsChecked}
                indeterminate={anyCheckedRows && !allRowsChecked}
                onChange={handleCheckboxAll}
              />
            )}
          </CheckboxContext.Consumer>
        ),
        cell: (_, { rowIndex }) => (
          <CheckboxContext.Consumer>
            {({ includesRow, handleCheckboxChange }) => (
              <DataTable.CheckboxCell
                checked={includesRow(rowIndex)}
                onChange={() => handleCheckboxChange({ rowIndex })}
              />
            )}
          </CheckboxContext.Consumer>
        ),
        subCell: null,
        width: 18,
      },
      ...columns,
    ]
  }

  return columns
}

render(function () {
  const dataTableRef = React.useRef()
  const [checkedRows, setCheckedRows] = React.useState([])
  const [data, setData] = React.useState(getData())
  const [loading, setLoading] = React.useState(false)
  const [showCheckboxColumn, setShowCheckboxColumn] = React.useState(false)
  const columns = React.useMemo(() => getColumns(showCheckboxColumn), [
    showCheckboxColumn,
  ])

  function handleCheckboxAll() {
    const allChecked = checkedRows.length === data.length
    const someChecked = checkedRows.length > 0
    setCheckedRows(allChecked || someChecked ? [] : generateRange(data.length))
  }

  function handleCheckboxChange({ rowIndex }) {
    setCheckedRows((checkedRows) => {
      const nextCheckedRows = [...checkedRows]
      const currentIndex = nextCheckedRows.indexOf(rowIndex)
      if (currentIndex > -1) {
        nextCheckedRows.splice(currentIndex, 1)
      } else {
        nextCheckedRows.push(rowIndex)
      }
      return nextCheckedRows
    })
  }

  const checkboxContextValue = {
    anyCheckedRows: checkedRows.length > 0,
    allRowsChecked: checkedRows.length === data.length,
    includesRow: (rowIndex) => checkedRows.indexOf(rowIndex) > -1,
    handleCheckboxAll,
    handleCheckboxChange,
  }

  return (
    <FilterLayout
      sidebarWidth={224}
      header={<Box padding={2}>HEADER</Box>}
      sidebar={<Box padding={2}>SIDEBAR</Box>}
      toolbar={
        <Box padding={2}>
          <button
            onClick={() => {
              setLoading(true)
              setTimeout(() => {
                setData(getData())
                setLoading(false)
              }, 800)
            }}
          >
            Load New data
          </button>
          <button onClick={() => dataTableRef.current.openAllSubRows()}>
            Open all sub rows
          </button>
          <button onClick={() => dataTableRef.current.closeAllSubRows()}>
            Close all sub rows
          </button>
          <button onClick={() => dataTableRef.current.toggleAllSubRows()}>
            Toggle all sub rows
          </button>
          <button onClick={() => setShowCheckboxColumn(!showCheckboxColumn)}>
            Toggle checkbox column
          </button>
        </Box>
      }
      table={
        <CheckboxContext.Provider value={checkboxContextValue}>
          <DataTable
            ref={dataTableRef}
            columns={columns}
            data={data}
            getSubData={(rowData) => rowData.subData}
            loading={loading}
          />
        </CheckboxContext.Provider>
      }
    />
  )
})

function getData() {
  return generateFakeData(
    (faker) => ({
      id: faker.random.uuid(),
      avatar: faker.image.avatar(),
      firstName: faker.name.firstName(),
      lastName: faker.name.lastName(),
      age: faker.random.number(),
      email: faker.internet.email(),
      streetAddress: faker.address.streetName(),
      streetName: faker.address.streetName(),
      city: faker.address.city(),
      zipCode: faker.address.zipCode(),
      companyName: faker.company.companyName(),
      catchPhrase: faker.company.catchPhrase(),
      checked: faker.random.boolean(),
      subData: generateFakeData(
        (faker) => ({
          id: faker.random.uuid(),
          avatar: faker.image.avatar(),
          firstName: faker.name.firstName(),
          lastName: faker.name.lastName(),
          id: faker.random.number(),
          email: faker.internet.email(),
          companyName: faker.company.companyName(),
          catchPhrase: faker.company.catchPhrase(),
        }),
        Math.floor(Math.random() * 6) + 1
      ),
    }),
    10
  )
}
const CheckboxContext = React.createContext(null)
function getColumns(showCheckboxColumn) {
  let columns = [
    {
      id: 'first-name',
      header: 'First Name',
      cell: 'firstName',
      sticky: true,
      sortable: true,
    },
    {
      id: 'last-name',
      header: 'Last Name',
      cell: 'lastName',
      sortable: true,
      defaultSortDirection: 'DESC',
    },
    {
      header: 'Age',
      cell: 'age',
      subCell: 'id',
      sortable: true,
      id: 'age',
    },
    {
      header: 'Address',
      cell: (rowData) =>
        `${rowData.streetAddress} ${rowData.streetName}, ${rowData.city} ${rowData.zipCode}`,
      subCell: null,
      sortable: true,
      id: 'address',
    },
    {
      header: 'Email',
      cell: 'email',
    },
    {
      header: 'Other',
      cell: (rowData) => `${rowData.companyName} (${rowData.catchPhrase})`,
    },
  ]
  if (showCheckboxColumn) {
    columns = [
      {
        header: () => (
          <CheckboxContext.Consumer>
            {({ anyCheckedRows, allRowsChecked, handleCheckboxAll }) => (
              <DataTable.CheckboxCell
                checked={allRowsChecked}
                indeterminate={anyCheckedRows && !allRowsChecked}
                onChange={handleCheckboxAll}
              />
            )}
          </CheckboxContext.Consumer>
        ),
        cell: (_, { rowIndex }) => (
          <CheckboxContext.Consumer>
            {({ includesRow, handleCheckboxChange }) => (
              <DataTable.CheckboxCell
                checked={includesRow(rowIndex)}
                onChange={() => handleCheckboxChange({ rowIndex })}
              />
            )}
          </CheckboxContext.Consumer>
        ),
        subCell: null,
        width: 18,
      },
      ...columns,
    ]
  }
  return columns
}
render(function () {
  const dataTableRef = React.useRef()
  const [checkedRows, setCheckedRows] = React.useState([])
  const [data, setData] = React.useState(getData())
  const [loading, setLoading] = React.useState(false)
  const [showCheckboxColumn, setShowCheckboxColumn] = React.useState(false)
  const columns = React.useMemo(() => getColumns(showCheckboxColumn), [
    showCheckboxColumn,
  ])
  function handleCheckboxAll() {
    const allChecked = checkedRows.length === data.length
    const someChecked = checkedRows.length > 0
    setCheckedRows(allChecked || someChecked ? [] : generateRange(data.length))
  }
  function handleCheckboxChange({ rowIndex }) {
    setCheckedRows((checkedRows) => {
      const nextCheckedRows = [...checkedRows]
      const currentIndex = nextCheckedRows.indexOf(rowIndex)
      if (currentIndex > -1) {
        nextCheckedRows.splice(currentIndex, 1)
      } else {
        nextCheckedRows.push(rowIndex)
      }
      return nextCheckedRows
    })
  }
  const checkboxContextValue = {
    anyCheckedRows: checkedRows.length > 0,
    allRowsChecked: checkedRows.length === data.length,
    includesRow: (rowIndex) => checkedRows.indexOf(rowIndex) > -1,
    handleCheckboxAll,
    handleCheckboxChange,
  }
  return (
    <FilterLayout
      sidebarWidth={224}
      header={<Box padding={2}>HEADER</Box>}
      sidebar={<Box padding={2}>SIDEBAR</Box>}
      toolbar={
        <Box padding={2}>
          <button
            onClick={() => {
              setLoading(true)
              setTimeout(() => {
                setData(getData())
                setLoading(false)
              }, 800)
            }}
          >
            Load New data
          </button>
          <button onClick={() => dataTableRef.current.openAllSubRows()}>
            Open all sub rows
          </button>
          <button onClick={() => dataTableRef.current.closeAllSubRows()}>
            Close all sub rows
          </button>
          <button onClick={() => dataTableRef.current.toggleAllSubRows()}>
            Toggle all sub rows
          </button>
          <button onClick={() => setShowCheckboxColumn(!showCheckboxColumn)}>
            Toggle checkbox column
          </button>
        </Box>
      }
      table={
        <CheckboxContext.Provider value={checkboxContextValue}>
          <DataTable
            ref={dataTableRef}
            columns={columns}
            data={data}
            getSubData={(rowData) => rowData.subData}
            loading={loading}
          />
        </CheckboxContext.Provider>
      }
    />
  )
})

Sortable rows

10 Results

Full Name

First Name

Last Name

Company

Amara Champlin

Amara

Champlin

Runte - Wiza

99772

Leopoldo Lakin

Leopoldo

Lakin

Haley - Stamm

9988

Valerie Emmerich

Valerie

Emmerich

Walter and Sons

50313

Jesse Lemke

Jesse

Lemke

Herman Inc

77207

Lucious Effertz

Lucious

Effertz

Heathcote LLC

91404

Jasmin Cassin

Jasmin

Cassin

Runte - Walsh

28195

D'angelo Ward

D'angelo

Ward

Ondricka - Heidenreich

14640

Dayana Mraz

Dayana

Mraz

O'Keefe, Parker and Price

72731

Jedidiah Abshire

Jedidiah

Abshire

Anderson, Jones and Wolf

66117

Hiram Hackett

Hiram

Hackett

Kautzer - Hirthe

4162

function getData(amount) {
  return generateFakeData(
    (faker) => ({
      id: faker.random.uuid(),
      avatar: faker.image.avatar(),
      firstName: faker.name.firstName(),
      lastName: faker.name.lastName(),
      companyName: faker.company.companyName(),
      age: faker.random.number(),
    }),
    amount
  )
}

function getHiddenColumnIdsFromAPI() {
  const localHiddenColumnIds =
    typeof window === 'undefined'
      ? null
      : localStorage.getItem('localHiddenColumnIds')
  return localHiddenColumnIds ? JSON.parse(localHiddenColumnIds) : []
}

function StatefulCell({ name }) {
  const [editing, setEditing] = React.useState()
  return (
    <Box>
      {editing ? (
        <Select onChange={() => setEditing(false)}>
          <Select.Option value="1">Value 1</Select.Option>
        </Select>
      ) : (
        <Text wrap={false} truncate onClick={() => setEditing(true)}>
          {name}
        </Text>
      )}
    </Box>
  )
}

const columns = [
  {
    width: 32,
    cell: (row) => <Avatar source={row.avatar} />,
    subCell: null,
    alwaysVisible: true,
  },
  {
    id: 'fullName',
    header: 'Full Name',
    cell: (row) => <Text truncate>{row.firstName + ' ' + row.lastName}</Text>,
    maxWidth: 200,
    minWidth: 150,
    alwaysVisible: true,
  },
  {
    id: 'firstName',
    header: 'First Name',
    cell: 'firstName',
  },
  {
    id: 'lastName',
    header: 'Last Name',
    cell: 'lastName',
    sortable: true,
  },
  {
    id: 'company',
    header: 'Company',
    cell: (row) => <StatefulCell name={row.companyName} />,
  },
  {
    label: 'Age',
    id: 'age',
    header: <Icon name="general.person" />,
    cell: 'age',
    css: {
      justifyContent: 'center',
      marginLeft: 'auto',
      position: 'sticky',
      right: 0,
    },
    width: 80,
  },
]

render(function () {
  const [condensed, setCondensed] = React.useState(false)
  const [amount, setAmount] = React.useState(10)
  const [hiddenColumnIds, setHiddenColumnIds] = React.useState(
    getHiddenColumnIdsFromAPI()
  )
  const [data, setData] = React.useState(getData(amount))
  const handleRowSort = React.useCallback((data) => setData(data), [])
  return (
    <Card>
      <StackView axis="horizontal" alignment="center" padding={2}>
        <Heading level={3}>{data.length} Results</Heading>
        <StackView
          axis="horizontal"
          alignment="center"
          marginLeft="auto"
          spacing={1}
        >
          <Group>
            <Input
              type="number"
              min={1}
              autoWidth
              value={amount}
              onChange={(event) => setAmount(+event.target.value)}
            />
            <Button
              title="Reload Data"
              variant="outline"
              onClick={() => setData(getData(amount))}
            />
          </Group>
          <Button
            title="Clear data"
            variant="outline"
            onClick={() => setData([])}
          />
          <Button
            title="Condensed"
            iconRight={condensed ? { name: 'general.check' } : undefined}
            variant="outline"
            onClick={() => setCondensed(!condensed)}
          />
          <DataTable.ColumnPicker
            columns={columns}
            hiddenColumnIds={hiddenColumnIds}
            onChange={({ hiddenColumnIds: nextHiddenColumnIds }) => {
              setHiddenColumnIds(nextHiddenColumnIds)
              localStorage.setItem(
                'localHiddenColumnIds',
                JSON.stringify(nextHiddenColumnIds)
              )
            }}
          />
        </StackView>
      </StackView>
      <Divider margin={0} />
      <DataTable
        data={data}
        columns={columns}
        empty={<Box color="grey-8">No results found 😞</Box>}
        hiddenColumnIds={hiddenColumnIds}
        onRowSort={handleRowSort}
        variant={condensed ? DataTable.variants.condensed : undefined}
      />
    </Card>
  )
})

function getData(amount) {
  return generateFakeData(
    (faker) => ({
      id: faker.random.uuid(),
      avatar: faker.image.avatar(),
      firstName: faker.name.firstName(),
      lastName: faker.name.lastName(),
      companyName: faker.company.companyName(),
      age: faker.random.number(),
    }),
    amount
  )
}
function getHiddenColumnIdsFromAPI() {
  const localHiddenColumnIds =
    typeof window === 'undefined'
      ? null
      : localStorage.getItem('localHiddenColumnIds')
  return localHiddenColumnIds ? JSON.parse(localHiddenColumnIds) : []
}
function StatefulCell({ name }) {
  const [editing, setEditing] = React.useState()
  return (
    <Box>
      {editing ? (
        <Select onChange={() => setEditing(false)}>
          <Select.Option value="1">Value 1</Select.Option>
        </Select>
      ) : (
        <Text wrap={false} truncate onClick={() => setEditing(true)}>
          {name}
        </Text>
      )}
    </Box>
  )
}
const columns = [
  {
    width: 32,
    cell: (row) => <Avatar source={row.avatar} />,
    subCell: null,
    alwaysVisible: true,
  },
  {
    id: 'fullName',
    header: 'Full Name',
    cell: (row) => <Text truncate>{row.firstName + ' ' + row.lastName}</Text>,
    maxWidth: 200,
    minWidth: 150,
    alwaysVisible: true,
  },
  {
    id: 'firstName',
    header: 'First Name',
    cell: 'firstName',
  },
  {
    id: 'lastName',
    header: 'Last Name',
    cell: 'lastName',
    sortable: true,
  },
  {
    id: 'company',
    header: 'Company',
    cell: (row) => <StatefulCell name={row.companyName} />,
  },
  {
    label: 'Age',
    id: 'age',
    header: <Icon name="general.person" />,
    cell: 'age',
    css: {
      justifyContent: 'center',
      marginLeft: 'auto',
      position: 'sticky',
      right: 0,
    },
    width: 80,
  },
]
render(function () {
  const [condensed, setCondensed] = React.useState(false)
  const [amount, setAmount] = React.useState(10)
  const [hiddenColumnIds, setHiddenColumnIds] = React.useState(
    getHiddenColumnIdsFromAPI()
  )
  const [data, setData] = React.useState(getData(amount))
  const handleRowSort = React.useCallback((data) => setData(data), [])
  return (
    <Card>
      <StackView axis="horizontal" alignment="center" padding={2}>
        <Heading level={3}>{data.length} Results</Heading>
        <StackView
          axis="horizontal"
          alignment="center"
          marginLeft="auto"
          spacing={1}
        >
          <Group>
            <Input
              type="number"
              min={1}
              autoWidth
              value={amount}
              onChange={(event) => setAmount(+event.target.value)}
            />
            <Button
              title="Reload Data"
              variant="outline"
              onClick={() => setData(getData(amount))}
            />
          </Group>
          <Button
            title="Clear data"
            variant="outline"
            onClick={() => setData([])}
          />
          <Button
            title="Condensed"
            iconRight={condensed ? { name: 'general.check' } : undefined}
            variant="outline"
            onClick={() => setCondensed(!condensed)}
          />
          <DataTable.ColumnPicker
            columns={columns}
            hiddenColumnIds={hiddenColumnIds}
            onChange={({ hiddenColumnIds: nextHiddenColumnIds }) => {
              setHiddenColumnIds(nextHiddenColumnIds)
              localStorage.setItem(
                'localHiddenColumnIds',
                JSON.stringify(nextHiddenColumnIds)
              )
            }}
          />
        </StackView>
      </StackView>
      <Divider margin={0} />
      <DataTable
        data={data}
        columns={columns}
        empty={<Box color="grey-8">No results found 😞</Box>}
        hiddenColumnIds={hiddenColumnIds}
        onRowSort={handleRowSort}
        variant={condensed ? DataTable.variants.condensed : undefined}
      />
    </Card>
  )
})

Multiple drag and drop tables

Name

Age

Darian Spinka

36171

Lavonne Marquardt

58388

Hermann Wyman

4287

Name

Age

Theodora Kling

80432

Pedro Kling

60311

Collin Towne

7032

Aubree Dietrich

67663

Sam Miller

65470

function getData(amount) {
  return generateFakeData(
    (faker) => ({
      id: faker.random.uuid(),
      firstName: faker.name.firstName(),
      lastName: faker.name.lastName(),
      age: faker.random.number(),
    }),
    amount
  )
}

const columns = [
  {
    header: 'Name',
    cell: (rowData) => `${rowData.firstName} ${rowData.lastName}`,
  },
  {
    header: 'Age',
    cell: 'age',
  },
]

render(() => {
  const [dataA, setDataA] = React.useState(getData(3))
  const [dataB, setDataB] = React.useState(getData(5))
  return (
    <DragDrop.Provider>
      <StackView axis="horizontal" width="100%" distribution="fill" spacing={2}>
        <Card width="auto">
          <DataTable
            columns={columns}
            data={dataA}
            droppableId="a"
            onDrop={(event) => {
              if (event.source.droppableId === 'a') {
                setDataA(
                  utils.reorderArray({
                    list: dataA,
                    startIndex: event.source.index,
                    endIndex: event.destination.index,
                  })
                )
              } else {
                setDataB(
                  utils.removeAtIndex({
                    list: dataB,
                    index: event.source.index,
                  })
                )
                setDataA(
                  utils.insertAtIndex({
                    list: dataA,
                    index: event.destination.index,
                    value: event.data,
                  })
                )
              }
            }}
          />
        </Card>
        <Card width="auto">
          <DataTable
            columns={columns}
            data={dataB}
            droppableId="b"
            sourceOnly
          />
        </Card>
      </StackView>
    </DragDrop.Provider>
  )
})

function getData(amount) {
  return generateFakeData(
    (faker) => ({
      id: faker.random.uuid(),
      firstName: faker.name.firstName(),
      lastName: faker.name.lastName(),
      age: faker.random.number(),
    }),
    amount
  )
}
const columns = [
  {
    header: 'Name',
    cell: (rowData) => `${rowData.firstName} ${rowData.lastName}`,
  },
  {
    header: 'Age',
    cell: 'age',
  },
]
render(() => {
  const [dataA, setDataA] = React.useState(getData(3))
  const [dataB, setDataB] = React.useState(getData(5))
  return (
    <DragDrop.Provider>
      <StackView axis="horizontal" width="100%" distribution="fill" spacing={2}>
        <Card width="auto">
          <DataTable
            columns={columns}
            data={dataA}
            droppableId="a"
            onDrop={(event) => {
              if (event.source.droppableId === 'a') {
                setDataA(
                  utils.reorderArray({
                    list: dataA,
                    startIndex: event.source.index,
                    endIndex: event.destination.index,
                  })
                )
              } else {
                setDataB(
                  utils.removeAtIndex({
                    list: dataB,
                    index: event.source.index,
                  })
                )
                setDataA(
                  utils.insertAtIndex({
                    list: dataA,
                    index: event.destination.index,
                    value: event.data,
                  })
                )
              }
            }}
          />
        </Card>
        <Card width="auto">
          <DataTable
            columns={columns}
            data={dataB}
            droppableId="b"
            sourceOnly
          />
        </Card>
      </StackView>
    </DragDrop.Provider>
  )
})

Grouped data

Name

Position

Start Date

Steuber - Boyle

Cheyanne Goodwin

National Directives Developer

08/25/2025

Sasha Lubowitz

Human Data Strategist

06/26/2025

Ortiz - Deckow

Earnestine Oberbrunner

Global Configuration Agent

03/25/2026

Chanelle Toy

Dynamic Group Agent

09/28/2025

Annabel Lebsack

Direct Branding Executive

10/20/2025

Angelina Kuhic

Lead Applications Supervisor

12/28/2025

Georgette Bogan

Central Integration Designer

03/19/2026

Hailey Kunde

Lead Intranet Assistant

08/24/2025

Bergstrom Inc

Lizeth Zboncak

Principal Creative Coordinator

05/27/2026

Max Langworth

International Metrics Architect

04/19/2026

Jonatan Davis

Direct Creative Technician

03/19/2026

function getData(amount) {
  return generateFakeData(
    (faker) => ({
      id: faker.random.uuid(),
      companyName: faker.company.companyName(),
      subData: generateFakeData(
        (faker) => ({
          id: faker.random.uuid(),
          avatar: faker.image.avatar(),
          firstName: faker.name.firstName(),
          lastName: faker.name.lastName(),
          jobTitle: faker.name.jobTitle(),
          startDate: faker.date.past(),
        }),
        Math.floor(Math.random() * 6) + 1
      ),
    }),
    amount
  )
}

const columns = [
  {
    header: 'Name',
    cell: (rowData) => (
      <Text size={4} weight={600}>
        {rowData.companyName}
      </Text>
    ),
    subCell: (rowData) => `${rowData.firstName} ${rowData.lastName}`,
    width: 'auto',
    css: {
      grow: 1,
      shrink: 1,
    },
  },
  {
    header: 'Position',
    subCell: 'jobTitle',
    includeSubCellWidth: true,
  },
  {
    header: 'Start Date',
    subCell: (rowData) => dateFns.format(rowData.startDate, 'MM/dd/yyyy'),
    width: 96,
    css: {
      justifyContent: 'flex-end',
    },
  },
]

render(() => {
  const [data, setData] = React.useState(getData(3))
  return (
    <Card>
      <DataTable
        columns={columns}
        data={data}
        getSubData={(rowData) => rowData.subData}
        variant={{
          bodySubRow: {
            backgroundColor: 'white',
          },
        }}
      />
    </Card>
  )
})

function getData(amount) {
  return generateFakeData(
    (faker) => ({
      id: faker.random.uuid(),
      companyName: faker.company.companyName(),
      subData: generateFakeData(
        (faker) => ({
          id: faker.random.uuid(),
          avatar: faker.image.avatar(),
          firstName: faker.name.firstName(),
          lastName: faker.name.lastName(),
          jobTitle: faker.name.jobTitle(),
          startDate: faker.date.past(),
        }),
        Math.floor(Math.random() * 6) + 1
      ),
    }),
    amount
  )
}
const columns = [
  {
    header: 'Name',
    cell: (rowData) => (
      <Text size={4} weight={600}>
        {rowData.companyName}
      </Text>
    ),
    subCell: (rowData) => `${rowData.firstName} ${rowData.lastName}`,
    width: 'auto',
    css: {
      grow: 1,
      shrink: 1,
    },
  },
  {
    header: 'Position',
    subCell: 'jobTitle',
    includeSubCellWidth: true,
  },
  {
    header: 'Start Date',
    subCell: (rowData) => dateFns.format(rowData.startDate, 'MM/dd/yyyy'),
    width: 96,
    css: {
      justifyContent: 'flex-end',
    },
  },
]
render(() => {
  const [data, setData] = React.useState(getData(3))
  return (
    <Card>
      <DataTable
        columns={columns}
        data={data}
        getSubData={(rowData) => rowData.subData}
        variant={{
          bodySubRow: {
            backgroundColor: 'white',
          },
        }}
      />
    </Card>
  )
})

Props

accessibilitysignature

toggleAllSubRowsTooltipTitle:Function

Provides the ability to change accessible labels used throughout the DataTable component.

canCollapseSubRowsboolean

Controls whether or not sub-rows can be collapsed.

columnsArray

alwaysVisible:boolean

Forces the column to always be visible regardless of hiddenColumnIds. This is also used to build a list of eligible columns for the ColumnPicker component.

cell:string | unknown

Controls how the incoming row data is rendered in a cell. Accepts a string that will be used as an accessor of the row data or a function that returns the row data as well as extra information about the row and column.

css:any

defaultSortDirection:'ASC' | 'DESC'

Overrides defaultSort.direction for this specific column. Defaults to ASC if neither values are provided.

footer:any

Similar to column.header. Controls the column footer rendering.

header:any

Controls the column header rendering. Accepts a string, element, component or function.

id:string | number

Used to identify a column. Required when using onRowSort or hiddenColumnIds.

includeSubCellWidth:boolean

Includes sub cells when calculating auto column widths.

label:string

Used to describe a column in ColumnPicker when header doesn't display any text like checkbox or icon.

maxWidth:number

The maximum size a column can be.

minWidth:number

The minimum size a column must be.

sortable:boolean

Determines if a column can be sorted or not. Defaults to false. See onColumnSort below for details on controlling sorting.

subCell:string | Function

Determines how a sub row cell is rendered. Uses cell as the default accessor if nothing is provided.

width:number

Specifies how wide a column is. If omitted, cell will be measured and calculated based on the largest column's cell width.

Determines how the incoming data is rendered as columns. Please note for optimal performance identity should not change between every render and should be static or memoized.

currentPagenumber

Current visible page number for pagination

dataArray

Accepts an array of data to be rendered. Data cells are ordered by the columns array.

dataTableRefany

Ref that is passed to useImperativeHandle which in turn returns `useCollapsibleRows.

defaultAllSubRowsOpenboolean

Controls whether or not sub-rows are open by default.

defaultSortsignature

columnId:string | number

direction:'ASC' | 'DESC'

Default sorting for columns. Please note this only affects controls and requires you to manage sorting the data yourself. See onColumnSort below for details on controlling sorting.

droppableIdstring

Droppable identifier used for internal DragDrop component.

emptyany

Provide an empty state when the table has no data.

getRowId(rowData: Data, rowIndex: number) => number | string

(rowData: object, rowIndex: number) => number

Used to identify rows. Defaults to rowData.id if available, otherwise uses rowIndex.

getRowLink(rowdata: Data) => string

(rowData: object) => string

Turns each row or sub-row into an anchor link.

getSubDataFunction

(rowData: object) => array<object>

Controls rendering of collapsible sub row content.

hiddenColumnIdsArray

Hide specific columns by their id.

innerBodyRefFunction

(bodyRef: object) => void

Used to gain access to the internal bodyRef.

keyboardShortcutsRecord

Accepts an object of keyboard shortcuts that can be performed when hovering a row. e.g. { 'a': ({ rowData }) => addUser(rowData.id) }. See the mousetrap library for valid key combinations.

loadingboolean

Puts the table in a loading state and shows a spinner in the middle of the table.

loadingTitlestring

Provide an accompanying title to the spinner while loading data.

onColumnSortFunction

(sortedColumns: { columnId, direction }) => void

Callback when a column header has been pressed.

onDragEndFunction

onDragEnd: (event) => void

Called at the end of a child Draggable drag.

onDragStartFunction

onDragStart: (event) => void

Called at the start of a child Draggable drag.

onDropFunction

onDrop: (event) => void

This function will be called when a Draggable has been dropped. Returns the onDragEnd event with any Draggable data attached.

onPageChangeComponentProps['onPageChange']

(nextPage: number) => undefined

Callback when new page is requested for pagination.

onRowClickFunction

(rowData: any, rowIndex: number, event: React.SyntheticEvent) => void

Callback when a row has been clicked.

onRowSortFunction

(sortedData: array) => void

Callback when a row has been sorted.

sourceOnlyboolean

This prop controls whether or not the droppable can receive and reorder draggables. If true, draggables may move outside the droppable, but not added.

totalPagesnumber

Total available pages for pagination.

variantsignature | Array

body:Object

bodyCell:Object | Function

({ firstRow, lastRow, firstCell, lastCell, rowData, rowIndex, columnIndex }) => object

bodyRow:Object | Function

({ isLink, firstRow, lastRow, evenRow, oddRow, rowData, rowIndex }) => object

bodySubCell:Object | Function

({ firstRow, lastRow, firstCell, lastCell, rowData, rowIndex, columnIndex, columnWidth }) => object

bodySubRow:Object | Function

({ isLink, firstRow, lastRow, evenRow, oddRow, rowData, rowIndex, parentRowIndex }) => object

header:Object

headerCell:Object | Function

({ columnIndex, isSortable }) => object

headerRow:Object

Provides the ability to change styles used throughout the DataTable component.

Collapsible subrows
Sortable rows
Multiple drag and drop tables
Grouped data
Props

PreviousCollapse NextDivider