Examples › Records selection

Name	Street address	City	State
Sipes Inc	280 Rigoberto Divide	Twin Falls	MT
Runolfsdottir - Cummerata	102 Konopelski Greens	Missouri City	KY
Johnston LLC	230 Julie Lake	Hartford	KY
Crist and Sons	3387 Blick Turnpike	Attleboro	WV
Schmidt and Sons	286 Leif Lock	Collierville	AL
Nicolas Group	09622 Marcel Place	Highland	OR
Kub and Sons	8699 Upton Fords	East Providence	IN
Jakubowski - Rolfson	191 O'Connell Greens	San Rafael	MA
Welch - Tremblay	31622 Isobel Fall	Olathe	AR
Mueller, Hodkiewicz and Beahan	21751 Elisa Village	Grand Prairie	WA

No records

Mantine DataTable is probably the only data-table component for Mantine that supports an intuitive batch selection of records, similar to the one you can find in Gmail: shift-clicking a row selection checkbox will result in selecting/deselecting all records between the last selected record and the current one.

In order to enable records selection, you’ll have to add the following properties to the DataTable:

selectedRecords → an array of currently selected records (with the same TS type as the records property);
onSelectedRecordsChange → a callback that will be invoked when the user alters the current selection.

When adding these two properties, the component will render a selection checkbox column and handle user input as following:

Clicking a row selection checkbox will result in selecting/deselecting the underlying record;
Clicking the column header checkbox will result in selecting/deselecting all visible records;
Shift-clicking a row selection checkbox will result in intuitively selecting all records between the last clicked record and the current one.

To determine selection inclusion, records are compared based on their ID property values, as specified on the DataTable’s idAccessor property (defaulting to id - see more info here).

const [selectedRecords, setSelectedRecords] = useState<Company[]>([]);

return (
  <>
    <DataTable
      withBorder
      withColumnBorders
      records={companies}
      columns={[
        { accessor: 'name', width: '40%' },
        { accessor: 'streetAddress', width: '60%' },
        { accessor: 'city', width: 160 },
        { accessor: 'state', width: 80 },
      ]}
      selectedRecords={selectedRecords}
      onSelectedRecordsChange={setSelectedRecords}
    />
    <Paper my="xl" py="xl" withBorder radius={0}>
      <Center>
        <Button
          uppercase
          leftIcon={<IconTrash size={16} />}
          color="red"
          disabled={!selectedRecords.length}
          onClick={() => showNotification({ color: 'red', message: 'Deleting data is dangerous!' })}
        >
          {selectedRecords.length
            ? `Delete ${
                selectedRecords.length === 1 ? 'one selected record' : `${selectedRecords.length} selected records`
              }`
            : 'Select records to delete'}
        </Button>
      </Center>
    </Paper>
  </>
);

Disable selection of certain records

You can disable the selection of certain records by providing an `isRecordSelectable` property like so:

const [selectedRecords, setSelectedRecords] = useState<Company[]>([]);

return (
  <DataTable
    withBorder
    withColumnBorders
    records={companies}
    columns={[
      { accessor: 'name', width: '40%' },
      { accessor: 'streetAddress', width: '60%' },
      { accessor: 'city', width: 160 },
      { accessor: 'state', width: 80 },
    ]}
    selectedRecords={selectedRecords}
    onSelectedRecordsChange={setSelectedRecords}
    isRecordSelectable={(record) => record.name.length < 14}
  />
);

Name	Street address	City	State
Sipes Inc	280 Rigoberto Divide	Twin Falls	MT
Runolfsdottir - Cummerata	102 Konopelski Greens	Missouri City	KY
Johnston LLC	230 Julie Lake	Hartford	KY
Crist and Sons	3387 Blick Turnpike	Attleboro	WV
Schmidt and Sons	286 Leif Lock	Collierville	AL
Nicolas Group	09622 Marcel Place	Highland	OR
Kub and Sons	8699 Upton Fords	East Providence	IN
Jakubowski - Rolfson	191 O'Connell Greens	San Rafael	MA
Welch - Tremblay	31622 Isobel Fall	Olathe	AR
Mueller, Hodkiewicz and Beahan	21751 Elisa Village	Grand Prairie	WA

No records

Additional selection checkbox props

You can pass additional props to the selection checkboxes by providing the allRecordsSelectionCheckboxProps and getRecordSelectionCheckboxProps properties. The former is an object of props that will be applied to the column header checkbox, while the latter is a function that receives the underlying record and record index and returns an object of props. will be applied to the row selection checkboxes.

<DataTable
  // other props...
  allRecordsSelectionCheckboxProps={{ 'aria-label': 'Select all records' }}
  getRecordSelectionCheckboxProps={(record) => ({ 'aria-label': `Select ${record.name}` })}
/>

Name	Street address	City	State
Sipes Inc	280 Rigoberto Divide	Twin Falls	MT
Runolfsdottir - Cummerata	102 Konopelski Greens	Missouri City	KY
Johnston LLC	230 Julie Lake	Hartford	KY
Crist and Sons	3387 Blick Turnpike	Attleboro	WV
Schmidt and Sons	286 Leif Lock	Collierville	AL
Nicolas Group	09622 Marcel Place	Highland	OR
Kub and Sons	8699 Upton Fords	East Providence	IN
Jakubowski - Rolfson	191 O'Connell Greens	San Rafael	MA
Welch - Tremblay	31622 Isobel Fall	Olathe	AR
Mueller, Hodkiewicz and Beahan	21751 Elisa Village	Grand Prairie	WA