Examples › Additional styling

There are more ways to style a Mantine DataTable component besides setting its basic properties and column properties or customizing it’s border colors.

With className

You can specify a className that will target the Mantine DataTable component root:

const useStyles = createStyles((theme) => ({
  table: {
    border: `1px dashed ${theme.colors.red[6]}`,
    borderRadius: theme.radius.md,
  },
}));

export default function AdditionalStylingExampleWithClassName() {
  const { classes } = useStyles();
  return (
    <DataTable
      className={classes.table}
      // ...
    />
  );
}

Name	Mission statement	Street address	City	State
Sipes Inc	Strategize magnetic vortals.	280 Rigoberto Divide	Twin Falls	MT
Runolfsdottir - Cummerata	Leverage one-to-one methodologies.	102 Konopelski Greens	Missouri City	KY
Johnston LLC	Transition wireless initiatives.	230 Julie Lake	Hartford	KY
Crist and Sons	Revolutionize out-of-the-box infomediaries.	3387 Blick Turnpike	Attleboro	WV
Schmidt and Sons	Optimize bricks-and-clicks eyeballs.	286 Leif Lock	Collierville	AL

No records

With inline style

You can provide a style object that will target the Mantine DataTable component root:

export default function AdditionalStylingExampleWithStyleObject() {
  return (
    <DataTable
      style={{
        border: '1px solid yellowgreen',
        borderRadius: 5,
      }}
      // ...
    />
  );
}

Name	Mission statement	Street address	City	State
Sipes Inc	Strategize magnetic vortals.	280 Rigoberto Divide	Twin Falls	MT
Runolfsdottir - Cummerata	Leverage one-to-one methodologies.	102 Konopelski Greens	Missouri City	KY
Johnston LLC	Transition wireless initiatives.	230 Julie Lake	Hartford	KY
Crist and Sons	Revolutionize out-of-the-box infomediaries.	3387 Blick Turnpike	Attleboro	WV
Schmidt and Sons	Optimize bricks-and-clicks eyeballs.	286 Leif Lock	Collierville	AL

No records

With SX

You can provide an sx property that will target the Mantine DataTable component root:

return (
  <DataTable
    sx={{
      border: '1px solid blue',
      borderRadius: 8,
    }}
    // ...
  />
);

Name	Mission statement	Street address	City	State
Sipes Inc	Strategize magnetic vortals.	280 Rigoberto Divide	Twin Falls	MT
Runolfsdottir - Cummerata	Leverage one-to-one methodologies.	102 Konopelski Greens	Missouri City	KY
Johnston LLC	Transition wireless initiatives.	230 Julie Lake	Hartford	KY
Crist and Sons	Revolutionize out-of-the-box infomediaries.	3387 Blick Turnpike	Attleboro	WV
Schmidt and Sons	Optimize bricks-and-clicks eyeballs.	286 Leif Lock	Collierville	AL

No records

The sx property can also point to a function that receives the current theme as its argument:

return (
  <DataTable
    sx={(theme) => ({
      border: `1px solid ${theme.colors.blue[6]}`,
      borderRadius: theme.radius.md,
    })}
    // ...
  />
);

Name	Mission statement	Street address	City	State
Sipes Inc	Strategize magnetic vortals.	280 Rigoberto Divide	Twin Falls	MT
Runolfsdottir - Cummerata	Leverage one-to-one methodologies.	102 Konopelski Greens	Missouri City	KY
Johnston LLC	Transition wireless initiatives.	230 Julie Lake	Hartford	KY
Crist and Sons	Revolutionize out-of-the-box infomediaries.	3387 Blick Turnpike	Attleboro	WV
Schmidt and Sons	Optimize bricks-and-clicks eyeballs.	286 Leif Lock	Collierville	AL

No records

With multiple class names

When styling with class names, you may need to increase selector specificity to override the default styling.
See this StackOverflow question for more information.

You can specifically target the component root, its header, footer and/or its pagination with different classNames:

const useStyles = createStyles((theme) => ({
  root: {
    border: `1px dashed ${theme.colors.red[6]}`,
    borderRadius: theme.radius.md,
  },
  header: {
    fontStyle: 'italic',
    '&& th': { color: theme.colors.red[6] },
  },
  footer: {
    fontStyle: 'italic',
    '&& th': { color: theme.colors.red[6] },
  },
  pagination: {
    color: theme.colors.orange[6],
    'button[data-active="true"]': {
      background: theme.colors.orange[4],
    },
    'button[data-active="true"]:not([data-disabled="true"]):hover': {
      background: theme.colors.orange[5],
    },
  },
}));

export default function AdditionalStylingExampleWithClassNames() {
  // ...
  const { classes } = useStyles();
  return (
    <DataTable
      classNames={classes}
      // ...
    />
  );
}

Name	Mission statement	Street address	City	State
Sipes Inc	Strategize magnetic vortals.	280 Rigoberto Divide	Twin Falls	MT
Runolfsdottir - Cummerata	Leverage one-to-one methodologies.	102 Konopelski Greens	Missouri City	KY
Johnston LLC	Transition wireless initiatives.	230 Julie Lake	Hartford	KY
Crist and Sons	Revolutionize out-of-the-box infomediaries.	3387 Blick Turnpike	Attleboro	WV
10 companies	Avg. chars: 33			9 states

1 - 4 / 10

No records

With styles property

You can specifically target the component root, its header, footer and/or its pagination with a styles property:

return (
  <DataTable
    styles={{
      root: {
        border: '1px solid yellowgreen',
        borderRadius: 5,
      },
      header: { fontStyle: 'italic' },
      footer: { fontStyle: 'italic' },
    }}
    // ...
  />
);

Name	Mission statement	Street address	City	State
Sipes Inc	Strategize magnetic vortals.	280 Rigoberto Divide	Twin Falls	MT
Runolfsdottir - Cummerata	Leverage one-to-one methodologies.	102 Konopelski Greens	Missouri City	KY
Johnston LLC	Transition wireless initiatives.	230 Julie Lake	Hartford	KY
Crist and Sons	Revolutionize out-of-the-box infomediaries.	3387 Blick Turnpike	Attleboro	WV
10 companies	Avg. chars: 33			9 states

1 - 4 / 10

No records

The styles property can also point to a function that receives the current theme as its argument:

return (
  <DataTable
    styles={(theme) => ({
      root: {
        border: `1px solid ${theme.colors.orange[6]}`,
        borderRadius: theme.radius.md,
      },
      header: { fontStyle: 'italic' },
      footer: { fontStyle: 'italic' },
    })}
    // ...
  />
);

Name	Mission statement	Street address	City	State
Sipes Inc	Strategize magnetic vortals.	280 Rigoberto Divide	Twin Falls	MT
Runolfsdottir - Cummerata	Leverage one-to-one methodologies.	102 Konopelski Greens	Missouri City	KY
Johnston LLC	Transition wireless initiatives.	230 Julie Lake	Hartford	KY
Crist and Sons	Revolutionize out-of-the-box infomediaries.	3387 Blick Turnpike	Attleboro	WV
10 companies	Avg. chars: 33			9 states

1 - 4 / 10

No records

Row styling

You can style rows with rowClassName, rowStyle and rowSx properties. They work the same way as className, style and sx, but target rows instead of the component root.

const useStyles = createStyles((theme) => ({
  blueishRow: { color: theme.colors.blue[6] },
}));

export default function AdditionalStylingExampleWithRowStyling() {
  const { classes } = useStyles();
  return (
    <DataTable
      withBorder
      rowClassName={({ name }) => (name === 'Runolfsdottir - Cummerata' ? classes.blueishRow : undefined)}
      rowStyle={({ name }) => (name === 'Johnston LLC' ? { color: '#FA5639' } : undefined)}
      // ...
    />
  );
}

Name	Mission statement	Street address	City	State
Sipes Inc	Strategize magnetic vortals.	280 Rigoberto Divide	Twin Falls	MT
Runolfsdottir - Cummerata	Leverage one-to-one methodologies.	102 Konopelski Greens	Missouri City	KY
Johnston LLC	Transition wireless initiatives.	230 Julie Lake	Hartford	KY
Crist and Sons	Revolutionize out-of-the-box infomediaries.	3387 Blick Turnpike	Attleboro	WV
Schmidt and Sons	Optimize bricks-and-clicks eyeballs.	286 Leif Lock	Collierville	AL