DataTable

View Source

Organize any type of data into rows and columns.

Collapsible subrows

HEADER

SIDEBAR

First Name

Last Name

Age

Address

Other

David

Tremblay

92550

Leffler Camp Savannah Squares, New Tracemouth 91043

Wiley_King@hotmail.com

Blanda Group (Diverse zero defect contingency)

Coleman

Gislason

10605

Tiana Forest Keagan Valleys, Sierrachester 19898-1735

Asia_Howe@hotmail.com

Dietrich, Toy and Nolan (Open-source maximized complexity)

Penelope

Bergstrom

92319

Jenkins Rue Verner Drive, West Haley 79804

Brayan.Yost30@yahoo.com

Leffler LLC (Versatile tangible productivity)

Lexus

Cartwright

25037

Terry Lane Champlin Drive, Davionmouth 04256-5305

Carol.OHara@hotmail.com

Nitzsche, Kerluke and Walsh (Extended system-worthy application)

Titus

Howell

80079

Elsie Village Balistreri Skyway, West Candida 33783

Hosea83@gmail.com

Kertzmann, Ledner and Skiles (Cloned discrete firmware)

Agnes

Tromp

92827

Adams Ridge Ashtyn Court, Justenmouth 50750

Destini.Gutkowski@hotmail.com

Harris and Sons (Networked 4th generation superstructure)

Ilene

Mills

29136

Crystal Track Matt Spurs, Considineport 49544

Janet66@yahoo.com

Hermann - Hauck (Open-architected tangible project)

Lou

Kuvalis

87465

Antonina Greens Dandre Ridges, West Demetris 56931-6503

Julius22@hotmail.com

Fahey - Weissnat (Monitored transitional utilisation)

Erica

Koch

28313

Ubaldo Burg Keebler Flats, East Alessiahaven 82555-4607

Jarvis.OConner@hotmail.com

Trantow, Reynolds and Toy (Open-source solution-oriented help-desk)

Gregoria

Kohler

41439

Elyssa Gardens Gabrielle Avenue, Wilkinsonmouth 44995

Mitchel_Stark61@hotmail.com

Schmitt - Krajcik (Proactive grid-enabled 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

Michel Schmeler

Michel

Schmeler

Mitchell - Heathcote

37060

Raquel Will

Raquel

Will

Price Group

98193

Tanner Osinski

Tanner

Osinski

Hartmann - Wolff

26477

Rogelio Bauch

Rogelio

Bauch

Wisozk - Johnston

45443

Heather Pfannerstill

Heather

Pfannerstill

D'Amore, Wiza and Ryan

81671

Federico McLaughlin

Federico

McLaughlin

Stokes - Dietrich

11745

Kirk Wilkinson

Kirk

Wilkinson

Ledner Group

23722

Burdette Erdman

Burdette

Erdman

Ziemann, Corkery and Runolfsson

Faustino Trantow

Faustino

Trantow

Herzog, Braun and Moore

66069

Dewitt Spencer

Dewitt

Spencer

Gleason, Goyette and Kshlerin

7304

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

Nelson Goldner

18935

Ulises Hermann

75542

Lucie Green

4753

Name

Age

Thurman Kautzer

72734

Evelyn Cassin

91408

Mariam Walsh

41231

Maude Jacobs

77994

Isabella Lynch

51137

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

Upton, Erdman and Becker

Bryce Zulauf

Central Identity Assistant

08/16/2025

Newton Bruen

Chief Markets Strategist

10/10/2025

Rene Windler

Chief Factors Coordinator

08/11/2025

Veum - Steuber

Michele Hudson

Dynamic Assurance Facilitator

12/11/2024

Boehm, Bruen and Gusikowski

Nestor Lynch

Global Group Architect

05/12/2025

Cassie Borer

Investor Integration Liaison

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