DataTable

View Source

Organize any type of data into rows and columns.

Collapsible subrows

HEADER

SIDEBAR

First Name

Last Name

Age

Address

Other

Mozelle

Welch

18835

Upton Bypass Kyra Tunnel, Bayerport 03578-3206

Baby.Erdman@gmail.com

Terry LLC (Cloned local knowledge base)

Talon

Nitzsche

58114

Earnest Forge Emilie Well, Jennieview 57569-6870

Juvenal25@yahoo.com

Stroman - Altenwerth (Adaptive bifurcated approach)

Dennis

Kemmer

Lind Wells Josefa Lake, Elvamouth 04648

Floyd_Robel@hotmail.com

Cole Inc (Reactive fresh-thinking service-desk)

Reese

Johnston

61708

Casper Mount Purdy Drive, South Damonmouth 87501

Jeanie72@hotmail.com

Reinger - Lueilwitz (Configurable static knowledge base)

Bernie

Renner

41942

Yost Ford Hobart Point, Reillyshire 05433

Torrance_Keebler89@hotmail.com

Leffler - Labadie (Sharable upward-trending synergy)

Mallie

West

98703

Sipes Motorway Trevion Points, Christiansenfort 85839

Graciela.Ebert@yahoo.com

Wiza - Williamson (Re-contextualized hybrid model)

Caleigh

Cruickshank

41096

Sandrine Orchard Ora Harbor, Eltamouth 74806

Johann_Heaney@yahoo.com

Osinski - Kilback (Fundamental zero defect algorithm)

Candido

Johns

23623

Dovie Skyway Dedrick Pine, East Gerardshire 13088-4001

Germaine61@hotmail.com

Bosco, Schuppe and Ward (Configurable didactic instruction set)

Margot

Stroman

2897

Jaqueline Village Newell Loaf, East Joanymouth 05383

Gerry83@yahoo.com

Nikolaus, Metz and Hermiston (Ergonomic discrete secured line)

Ezra

Metz

50177

Darrell Bridge Haven Course, Veumfort 89901

Chaim_Tillman@gmail.com

Boyle - Stiedemann (Upgradable client-driven success)

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

Evalyn Koepp

Evalyn

Koepp

Spencer - Herman

74971

Arnaldo Hudson

Arnaldo

Hudson

Macejkovic - Greenholt

67755

Wilburn Graham

Wilburn

Graham

Kutch Group

15289

Michele Windler

Michele

Windler

Kessler - Abshire

59925

Josie Padberg

Josie

Padberg

Bashirian and Sons

90771

Courtney Rohan

Courtney

Rohan

Connelly Inc

33897

Chad Wintheiser

Chad

Wintheiser

Koelpin LLC

9070

Katlyn Murphy

Katlyn

Murphy

Padberg LLC

35721

Lydia Koss

Lydia

Koss

Dibbert, Schuppe and Daniel

47838

Boyd Wolff

Boyd

Wolff

Krajcik, Hills and Moen

48527

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

Bethany Bartell

64339

Gina Pollich

58396

Arjun Wiegand

76216

Name

Age

Bruce Will

63809

Alexzander Jast

89344

Remington Gaylord

81008

Jocelyn Rolfson

41311

Sadie Hauck

95741

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

Kautzer Inc

Skylar Mante

Human Factors Assistant

06/26/2025

Pat Russel

Central Creative Architect

07/23/2025

Frederic Bernier

International Response Designer

03/27/2025

Ankunding and Sons

Deshawn Mitchell

Dynamic Interactions Administrator

09/07/2025

Justyn Weber

Senior Usability Producer

10/04/2025

Bonita Purdy

Future Quality Officer

12/22/2024

Jacobs - Senger

Humberto DuBuque

Forward Tactics Analyst

01/20/2025

Tyrel Schmeler

Forward Infrastructure Architect

04/20/2025

Coty Schumm

Customer Group Administrator

04/03/2025

Stacey Tremblay

Internal Accountability Administrator

07/31/2025

Tierra Steuber

Internal Paradigm Orchestrator

08/21/2025

Bianka Bogisich

Forward Mobility Officer

02/22/2025

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