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

Each key takes a style object. Some keys accept extra style fields for a specific state.

Key	Extra fields	Description
`table`	-	The table root element.
`tableWrapper`	-	Wrapper `<div>` around the table.
`responsiveWrapper`	-	Scroll container around the table.
`header`	`fontColor`, `fontSize`	Title and actions bar above the table.
`subHeader`	-	Sub-header bar (search, actions).
`head`	-	Column header area.
`headRow`	`denseStyle`	Column header row.
`headCells`	`draggingStyle`	Column header cells.
`cells`	`draggingStyle`	Body cells.
`rows`	`selectedHighlightStyle`, `denseStyle`, `highlightOnHoverStyle`, `stripedStyle`	Body rows.
`expanderRow`	-	The expanded content row.
`expanderCell`	-	Cell containing the expand/collapse button.
`expanderButton`	-	The expand/collapse button.
`pagination`	`pageButtonsStyle`	Pagination bar and page buttons.
`footer`	-	The footer row container.
`footerCells`	-	Individual footer cells.
`noData`	-	Empty-state container.
`progress`	-	Loading indicator 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 Icons on the Themes 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.

Prop reference

Prop	Type	Default	Description
`customStyles`	`TableStyles`	-	Fine-grained style overrides. See Custom styles.
`conditionalRowStyles`	`ConditionalStyles<T>[]`	-	Apply styles or class names to rows when a predicate matches.

customStyles takes a TableStyles object. See the API reference for every styleable slot.