Examples › Customizing border colors

If you’re not happy with the default border colors derived from Mantine’s Table component, you can customize them using borderColor and rowBorderColor properties.

The borderColor is applied to:

the table outer border (if enabled by withBorder property);
header bottom border;
pagination top border (if pagination is used).

The rowBorderColor is applied to:

the bottom of each row;
the column borders (if enabled by withColumnBorders property).

For example:

<DataTable
  withBorder
  withColumnBorders
  borderColor="#40C057"
  rowBorderColor="#FAB005"
  // ...
/>

Name	Street address	City	State
Crist and Sons	3387 Blick Turnpike	Attleboro	WV
Jakubowski - Rolfson	191 O'Connell Greens	San Rafael	MA
Johnston LLC	230 Julie Lake	Hartford	KY
Kub and Sons	8699 Upton Fords	East Providence	IN
10 companies		10 cities	9 states

1 - 4 / 10

No records

These properties also accept functions that receive the current theme as an argument. For instance, here’s how you could set the border colors in accordance to the currently selected color scheme:

<DataTable
  withBorder
  withColumnBorders
  borderColor={(theme) =>
    theme.colorScheme === 'dark' ? theme.fn.darken(theme.colors.orange[8], 0.2) : theme.colors.red[8]
  }
  rowBorderColor={(theme) =>
    theme.colorScheme === 'dark' ? theme.fn.darken(theme.colors.orange[8], 0.4) : theme.colors.red[2]
  }
  // ...
/>

Name	Street address	City	State
Crist and Sons	3387 Blick Turnpike	Attleboro	WV
Jakubowski - Rolfson	191 O'Connell Greens	San Rafael	MA
Johnston LLC	230 Julie Lake	Hartford	KY
Kub and Sons	8699 Upton Fords	East Providence	IN
10 companies		10 cities	9 states