Defining Your Own Theme

By default RDT comes with a light and dark theme that can be set on the theme property, however, you can create your very own theme using the createTheme helper or tweak the existing built in light and dark themes.

Refer to themes.ts for properties you can use to create your own color theme.

Custom Solarized Theme

Let's create a solarized theme that inherits from the build in dark theme:

import DataTable, { createTheme } from 'react-data-table-component';

// createTheme creates a new theme named solarized that overrides the build in dark theme
createTheme('solarized', {
  text: {
    primary: '#268bd2',
    secondary: '#2aa198',
  },
  background: {
    default: '#002b36',
  },
  context: {
    background: '#cb4b16',
    text: '#FFFFFF',
  },
  divider: {
    default: '#073642',
  },
  action: {
    button: 'rgba(0,0,0,.54)',
    hover: 'rgba(0,0,0,.08)',
    disabled: 'rgba(0,0,0,.12)',
  },
}, 'dark');

const MyComponent = () => (
  <DataTable
    title="Arnold Movies"
    columns={columns}
    theme="solarized"
  />
);
Copy

Tweaking the built in light and dark themes

You can also take an existing theme and tweak the colors without much effort:

import DataTable, { createTheme } from 'react-data-table-component';

// createTheme creates a new theme named solarized that overrides the build in dark theme
createTheme('dark', {
  background: {
    default: 'transparent',
  },
});

const MyComponent = () => (
  <DataTable
    title="Arnold Movies"
    columns={columns}
    theme="solarized"
  />
);
Copy

Once you've created your theme it will now be available to all DataTables across your project so you may want to define your custom themes in seperate files.