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
Feest, Bogan and Herzog	Stromanport	WY
Cummerata - Kuhlman	South Gate	NH
Goyette Inc	Dorthyside	ID
Runte Inc	McAllen	MA
Goldner, Rohan and Lehner	North Louie	WY

No records

Here is the code:

return (
  <DataTable
    withTableBorder
    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
Feest, Bogan and Herzog	Stromanport	WY
Cummerata - Kuhlman	South Gate	NH
Goyette Inc	Dorthyside	ID
Runte Inc	McAllen	MA
Goldner, Rohan and Lehner	North Louie	WY

No records

Code:

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