selection

You can enable row selection in by setting tableOptions.enableRowSelection to true.

<DataTable tableOptions={{ enableRowSelection: true }} />

Simply enabling selections will add a selection column with checkboxes to the table, allowing users to select individual rows or all rows at once.

Without any further configuration, the selection will only affect the export function, allowing the user to export only the selected rows.

Selection Actions

When row selection is enabled, you can add additional actions that operate on the selected rows by using the batchActions prop.

This prop accepts an array of action definitions, each containing an icon, a text label, and an onClick handler that receives the selected rows as an argument.

const [data, setData] = useState<Cat[]>(cats)
const batchActions = [
  {
    icon: faTrash,
    onClick: rows => {
      const newData = data.filter(cat => {
        if (rows.map(row => row.id).includes(cat.id)) {
          return false
        }
        return cat
      })
      setData(newData)
      alert(`${rows.length} items are being deleted! \n
      Deleting ids: ${rows.map(row => row.id).join(', ')}`)
    },
    text: 'Delete',
  },
  {
    icon: faEdit,
    onClick: rows => {
      const newData = data.map(cat => {
        if (rows.map(row => row.id).includes(cat.id)) {
          return { ...cat, age: 0 }
        }
        return cat
      })
      setData(newData)
      alert(`All your cats are now kittens!`)
    },
    text: 'Edit',
  },
]

return <DataTable batchActions={batchActions} tableOptions={{ enableRowSelection: true }} />

Select All

By default, the "Select All" checkbox in the header only selects the rows on the current page. You can change this behavior by setting the tableOptions.selectAllMode to 'all', which will select all rows in the table across all pages.