Examples › Custom row or cell attributes

Adding custom attributes to table rows or table cells could be useful for testing purposes.

You can add custom attributes to the table rows using the customRowAttributes property. It accepts a function that receives two arguments, record and recordIndex and returns an object with attributes to add to the row.

Similarly, each column can have its own customCellAttributes property that accepts a function that receives two arguments, record and recordIndex and returns an object with attributes to add to the cell.

Inspect the table below to see the attributes generated for each row and cell:

Name	City	State
Sipes Inc	Twin Falls	MT
Runolfsdottir - Cummerata	Missouri City	KY
Johnston LLC	Hartford	KY
Crist and Sons	Attleboro	WV
Schmidt and Sons	Collierville	AL

No records

return (
  <DataTable
    withBorder
    shadow="xs"
    columns={[
      { accessor: 'name' },
      { accessor: 'city', customCellAttributes: ({ city }) => ({ 'data-cy-city': city }) },
      { accessor: 'state', customCellAttributes: ({ state }) => ({ 'data-cy-state': state }) },
    ]}
    records={records}
    customRowAttributes={({ id, name }, recordIndex) => ({
      'data-cy-id': id,
      'data-cy-name': name,
      'data-cy-index': recordIndex,
    })}
  />
);

Handling middle-clicks

Here is how you could use the customRowAttributes property to handle middle-clicks on table rows:

Name	City	State
Sipes Inc	Twin Falls	MT
Runolfsdottir - Cummerata	Missouri City	KY
Johnston LLC	Hartford	KY
Crist and Sons	Attleboro	WV
Schmidt and Sons	Collierville	AL

No records

return (
  <DataTable
    withBorder
    shadow="xs"
    columns={[{ accessor: 'name' }, { accessor: 'city' }, { accessor: 'state' }]}
    records={records}
    customRowAttributes={({ name }) => ({
      onMouseDown: (e: MouseEvent) => {
        if (e.button === 1) {
          alert(`Middle-click on row ${name}`);
        }
      },
    })}
  />
);