Custom styles

Style every part of DataTable via the customStyles prop, or apply per-row styles conditionally with conditionalRowStyles.

Custom styles

Toggle between conditional row styles (salary highlight + inactive fade) and a customStyles header override.

Mode:Yellow highlight = salary > $140k · Faded = inactive

Name

Department

Salary

Status

Aria Chen

Engineering

$155,000

Active

Marcus Webb

Product

$132,000

Active

Priya Kapoor

Design

$118,000

Inactive

Jordan Ellis

Analytics

$143,000

Active

Sam Rivera

Engineering

$128,000

Inactive

Taylor Brooks

Sales

$97,000

Active

import DataTable, { type TableColumn, type TableStyles, type ConditionalStyles } from 'react-data-table-component';

interface Employee {
  id: number;
  name: string;
  department: string;
  salary: number;
  active: boolean;
}

const data: Employee[] = [
  { id: 1, name: 'Aria Chen',     department: 'Engineering', salary: 155000, active: true  },
  { id: 2, name: 'Marcus Webb',   department: 'Product',     salary: 132000, active: true  },
  { id: 3, name: 'Priya Kapoor',  department: 'Design',      salary: 118000, active: false },
  { id: 4, name: 'Jordan Ellis',  department: 'Analytics',   salary: 143000, active: true  },
  { id: 5, name: 'Sam Rivera',    department: 'Engineering', salary: 128000, active: false },
  { id: 6, name: 'Taylor Brooks', department: 'Sales',       salary:  97000, active: true  },
];

const columns: TableColumn<Employee>[] = [
  { name: 'Name',       selector: r => r.name,       sortable: true },
  { name: 'Department', selector: r => r.department, sortable: true },
  { name: 'Salary',     selector: r => r.salary,     sortable: true,
    format: r => `$${r.salary.toLocaleString()}`, right: true },
  {
    name: 'Status',
    selector: r => r.active,
    cell: r => (
      <span style={{ padding: '2px 8px', borderRadius: 12, fontSize: 11, fontWeight: 600,
        background: r.active ? '#dcfce7' : '#f3f4f6',
        color: r.active ? '#15803d' : '#6b7280' }}>
        {r.active ? 'Active' : 'Inactive'}
      </span>
    ),
  },
];

// Conditional row styles (applied per-row based on a predicate)
const conditionalRowStyles: ConditionalStyles<Employee>[] = [
  {
    when: row => row.salary > 140000,
    style: { backgroundColor: '#fefce8', borderLeft: '3px solid #eab308' },
  },
  {
    when: row => !row.active,
    style: { opacity: 0.5 },
  },
];

// customStyles: override the look of specific table parts
const customStyles: TableStyles = {
  headRow: {
    style: { backgroundColor: '#f0f4ff', fontWeight: 700 },
  },
  headCells: {
    style: { color: '#374151', fontSize: 13 },
  },
  rows: {
    style: { fontSize: 13 },
  },
};

export default function App() {
  return (
    <DataTable
      columns={columns}
      data={data}
      conditionalRowStyles={conditionalRowStyles}
      customStyles={customStyles}
      highlightOnHover
    />
  );
}

customStyles: targeting table parts

The customStyles prop accepts a TableStyles object. Each key targets a specific part of DataTable and accepts a style property with standard React.CSSProperties values.

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

const customStyles: TableStyles = {
  headRow: {
    style: {
      backgroundColor: '#f0f4ff',
      fontWeight: 700,
    },
  },
  rows: {
    style: {
      fontSize: '14px',
    },
    selectedHighlightStyle: {
      backgroundColor: '#e0eaff',
    },
  },
  cells: {
    style: {
      paddingLeft: '16px',
      paddingRight: '16px',
    },
  },
};

<DataTable columns={columns} data={data} customStyles={customStyles} />

Available style targets

Key	Description
`table`	The root `<div>` wrapping the table
`tableWrapper`	Inner wrapper for overflow handling
`responsiveWrapper`	Horizontal scroll container
`header`	Title bar above the table
`subHeader`	Sub-header area (search, actions)
`head`	Column header area
`headRow`	Column header row
`headCells`	Column header cells
`cells`	Body cells
`rows`	Body rows (includes `selectedHighlightStyle`)
`expanderRow`	Expanded row container
`expanderCell`	Expander toggle cell
`expanderButton`	Expand/collapse button icon
`pagination`	Pagination bar
`noData`	Empty-state container
`progress`	Loading state container

Conditional row styles

Use conditionalRowStyles to apply styles to individual rows based on a predicate. Multiple entries can match the same row. They are applied in array order.

import { type ConditionalStyles } from 'react-data-table-component';

const conditionalRowStyles: ConditionalStyles<Employee>[] = [
  {
    when: row => row.salary > 100000,
    style: { backgroundColor: '#fff9e6' },
  },
  {
    when: row => !row.active,
    style: { opacity: 0.5 },
  },
  {
    // Use a CSS class instead of inline styles
    when: row => row.role === 'Admin',
    classNames: ['row-admin'],
  },
];

<DataTable
  columns={columns}
  data={data}
  conditionalRowStyles={conditionalRowStyles}
/>

CSS custom properties

For theming that affects the entire table, prefer CSS custom properties via createTheme() or by overriding variables directly. See the Themes page.

To replace pagination or expander icons, see the Icons page.

Migrating from v7

In v7, customStyles accepted CSSObject from styled-components. In v8, they accept React.CSSProperties. The practical difference: pseudo-selectors like &:hover are not valid here. Use conditionalRowStyles or CSS classes for hover and focus states.