DataTable

View Source

Organize any type of data into rows and columns.

Collapsible subrows

HEADER

SIDEBAR

First Name

Last Name

Age

Address

Other

Tiara

Bartell

14139

Stokes Causeway Arturo Estates, Milliemouth 74155

Rhiannon0@yahoo.com

Altenwerth - McDermott (Intuitive didactic budgetary management)

Chester

Daugherty

93749

Parker Manors Jenkins Tunnel, East Rolandoburgh 68931-7353

Schuyler32@yahoo.com

Schowalter - Tromp (Intuitive web-enabled open architecture)

Chelsey

Mraz

15625

Stokes Inlet O'Keefe Vista, Rogahnport 46383-8464

Gordon34@hotmail.com

Bins - Vandervort (Enterprise-wide asymmetric neural-net)

Samara

Watsica

69638

Thea Village Fadel Shoal, Romagueraside 13593

Zena.Mann@hotmail.com

Leffler and Sons (Seamless disintermediate capacity)

Wilfrid

Russel

16035

Halvorson Inlet Feeney Port, East Kristyside 48091-4915

Irwin.Windler52@hotmail.com

Bernier - Hauck (Cross-platform discrete knowledge user)

Maurice

Littel

34046

Elmer Pines Bernie Motorway, West Ramiro 07458-9417

Colten81@hotmail.com

Dicki LLC (Secured cohesive capability)

Leila

Johns

33988

Larkin Mews Herman Viaduct, Port Kevenmouth 63877-4706

Rachel11@yahoo.com

Gislason, Considine and Schowalter (Programmable user-facing core)

Della

Lowe

16465

Stehr Knoll Cathryn Vista, Schmittfort 82718

Tressie.Mayer@gmail.com

Larson and Sons (Quality-focused hybrid support)

Ara

Kuphal

44906

Gregoria Circles Sheldon Fields, Hermanberg 04200-9465

Joana89@hotmail.com

Trantow and Sons (Exclusive static customer loyalty)

Domenica

Ullrich

41299

Hintz Meadow Mante Shores, Port Vladimir 87901

Breana_Rippin@gmail.com

Parisian - Johnson (Reverse-engineered responsive help-desk)

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

Oleta Murazik

Oleta

Murazik

Kiehn, Klein and Hamill

83505

Marcellus Goyette

Marcellus

Goyette

Friesen, Powlowski and Veum

47864

Aliza Marvin

Aliza

Marvin

Bernhard - Kuphal

88468

Nedra Ruecker

Nedra

Ruecker

Bartell LLC

56529

Ian Vandervort

Ian

Vandervort

Satterfield, Treutel and Schneider

13964

Kaylin Cruickshank

Kaylin

Cruickshank

Schneider Group

76591

Davion Kris

Davion

Kris

Herman, Hickle and Padberg

98909

Drake Connelly

Drake

Connelly

Steuber - Hane

33705

Evans Hammes

Evans

Hammes

Boyle - Gorczany

93362

Gaston McDermott

Gaston

McDermott

Williamson Inc

29113

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

Johann Daugherty

9369

Rolando Rath

38552

Adalberto Schowalter

10979

Name

Age

Carolyn DuBuque

67611

Hettie Deckow

849

Marcelo Dickens

61948

Brittany Hyatt

93186

Alexandrea McLaughlin

25092

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

Lehner, Reilly and Lind

Palma Leuschke

Legacy Intranet Liaison

06/08/2026

Langworth Inc

Keshaun Hickle

Corporate Communications Director

07/26/2026

Madelyn Nolan

Lead Quality Director

12/20/2025

Schmeler LLC

Stacy Muller

Future Web Supervisor

04/28/2026

Taylor McDermott

Lead Operations Consultant

08/07/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