Themes & Color Mode

// Apply Material Design layout with your own brand color
createTheme('material-violet', { primary: '#6200EE' }, 'material');

<DataTable columns={columns} data={data} theme="material-violet" />

// Always dark — ignores OS preference
<DataTable columns={columns} data={data} theme="material" colorMode="dark" />

// Follow OS / page toggle (default, explicit)
<DataTable columns={columns} data={data} theme="crisp" colorMode="system" />

// Force light even when the page is in dark mode
<DataTable columns={columns} data={data} theme="rounded" colorMode="light" />

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

// 1. Named — register globally, reference by string in the theme prop
createTheme('my-brand', { primary: '#6200EE' }, 'material');

// 2. Inline — compose and pass the object directly to the theme prop
const inlineTheme = createTheme({ primary: '#e91e63' }, 'crisp');
<DataTable theme={inlineTheme} columns={columns} data={data} />

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

createTheme('violet', {
  primary: '#6200EE',
  text: {
    primary: '#1a1a2e',
    secondary: '#4a4a6a',
    disabled: '#9e9e9e',
  },
  background: {
    default: '#f5f0ff',
    header: '#ede7f6',   // distinct header background
  },
  divider:          { default: '#d1c4e9' },
  selected:         { default: '#ede7f6', text: '#1a1a2e' },
  highlightOnHover: { default: '#ede7f6', text: '#1a1a2e' },
  striped:          { default: '#f3eeff', text: '#1a1a2e' },
  button: {
    default: '#6200EE',
    focus:    'rgba(98,0,238,0.12)',
    hover:    'rgba(98,0,238,0.08)',
    disabled: '#d1c4e9',
  },
  context: { background: '#6200EE', text: '#ffffff' },
  // Dark-mode overrides — only what changes
  darkMode: {
    primary: '#BB86FC',
    text:       { primary: '#e0e0e0', secondary: '#b0b0b0' },
    background: { default: '#1a0533', header: '#240844' },
    divider:    { default: '#3d1f6e' },
    selected:   { default: '#2d1060', text: '#e0e0e0' },
    highlightOnHover: { default: '#2d1060', text: '#e0e0e0' },
    striped:    { default: '#1e0a40', text: '#e0e0e0' },
  },
  // Structural
  spacing:    { rowHeight: '48px', headerHeight: '56px', cellPaddingX: '16px' },
  typography: { fontSize: '14px', fontSizeHeader: '12px' },
  shape:      { borderRadius: '8px' },
});

import { ChevronUp, ChevronDown, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react';

// Sort icon — replaces the chevron shown in sortable column headers
<DataTable
  sortIcon={<ChevronUp size={14} />}
  columns={columns}
  data={data}
/>

// Expander icons — collapsed / expanded state
<DataTable
  expandableRows
  expandableIcon={{
    collapsed: <ChevronDown size={16} />,
    expanded:  <ChevronUp  size={16} />,
  }}
  columns={columns}
  data={data}
/>

// Pagination icons — any subset; omitted keys fall back to defaults
<DataTable
  pagination
  paginationIcons={{
    previous: <ChevronLeft  size={16} />,
    next:     <ChevronRight size={16} />,
    first:    <ChevronsLeft  size={16} />,
    last:     <ChevronsRight size={16} />,
  }}
  columns={columns}
  data={data}
/>

import { createTheme } from 'react-data-table-component';
import { ChevronUp, ChevronDown, ChevronLeft, ChevronRight } from 'lucide-react';

createTheme('icon-theme', {
  icons: {
    sort: <ChevronUp size={14} />,
    expandable: {
      collapsed: <ChevronDown size={16} />,
      // expanded: omitted — falls back to the built-in default
    },
    pagination: {
      next:     <ChevronRight size={16} />,
      previous: <ChevronLeft size={16} />,
      // first/last: omitted — fall back to defaults
    },
  },
});

<DataTable columns={columns} data={data} theme="icon-theme" />

import Checkbox from '@mui/material/Checkbox';

<DataTable
  selectableRows
  selectableRowsComponent={Checkbox}
  selectableRowsComponentProps={{ color: 'primary' }}
/>

import React from 'react';

const MyCheckbox = React.forwardRef<
  HTMLInputElement,
  React.InputHTMLAttributes<HTMLInputElement>
>((props, ref) => (
  <input
    {...props}
    ref={ref}
    style={{ accentColor: 'teal', width: 18, height: 18 }}
  />
));
MyCheckbox.displayName = 'MyCheckbox';

<DataTable
  selectableRows
  selectableRowsComponent={MyCheckbox}
/>

createTheme('grid', {
  primary: '#1976d2',
  headerSeparator: 'full',   // bold line below header row
  columnSeparator: 'full',   // full-height lines between columns
}, 'default');

// Override for one specific table
<DataTable theme="grid" columnSeparator={false} />

.my-table {
  --rdt-color-text-primary:   #1a1a2e;
  --rdt-color-bg:             #f0f4ff;
  --rdt-color-header-bg:      #e8edff;  /* separate header background */
  --rdt-color-divider:        #c7d2fe;
  --rdt-color-highlight:      #e0e7ff;
  --rdt-color-selected:       #ede9fe;
  --rdt-border-radius:        8px;
  --rdt-font-size:            13px;
}