Conditional styles
Apply styles or CSS class names to rows and cells based on row data — no custom
cell renderer required.
conditionalRowStyles
Pass an array of ConditionalStyles<T> objects to the conditionalRowStyles prop.
Each entry runs its when predicate against every row; when it returns true
the style or classNames are applied to that row.
import DataTable, { type ConditionalStyles } from 'react-data-table-component';
const conditionalRowStyles: ConditionalStyles<Deal>[] = [
{
when: row => row.stage === 'Closed Won',
style: { backgroundColor: '#f0fdf4', borderLeft: '3px solid #16a34a' },
},
{
when: row => row.stage === 'Closed Lost',
style: { backgroundColor: '#fef2f2', opacity: 0.75 },
},
];
<DataTable conditionalRowStyles={conditionalRowStyles} columns={columns} data={data} />Style as a function
When the style values themselves depend on the row, pass a function instead of a plain object.
{
when: row => row.salary > 100000,
style: row => ({
fontWeight: row.salary > 200000 ? 700 : 400,
color: row.salary > 200000 ? '#15803d' : 'inherit',
}),
}CSS class names
Use classNames to apply Tailwind utilities or your own CSS classes instead of inline styles.
{
when: row => row.flagged,
classNames: ['bg-red-50', 'border-l-4', 'border-red-500'],
}conditionalCellStyles
The same ConditionalStyles<T> shape applies at the cell level via the
conditionalCellStyles prop on individual column definitions. This lets you
highlight specific cells without changing the full row.
const columns: TableColumn<Deal>[] = [
{
name: 'Value',
selector: r => r.value,
format: r => fmt(r.value),
right: true,
conditionalCellStyles: [
{ when: r => r.value >= 200000, style: { fontWeight: 700, color: '#15803d' } },
{ when: r => r.value < 20000, style: { color: '#9ca3af' } },
],
},
{
name: 'Days open',
selector: r => r.daysOpen,
right: true,
conditionalCellStyles: [
{ when: r => r.daysOpen > 90, style: { color: '#dc2626', fontWeight: 700 } },
{ when: r => r.daysOpen > 60, style: { color: '#d97706' } },
],
},
];Interaction with other row styles
Conditional row styles are applied after the base row style, so they override the default
background. The hover highlight from highlightOnHover will override a conditional
background on hover — which is usually the desired behavior. If you need the conditional color
to persist on hover, set it via rows.highlightOnHoverStyle in customStyles.
To carry a parent row's conditional styles into its expanded panel, set
expandableInheritConditionalStyles.
Conditional row and cell styles — sales pipeline
Won deals get a green left border; lost deals are dimmed. Value cells are bold-green for large deals, gray for small. Days Open cells turn amber then red as they age.
import DataTable, { type ConditionalStyles, type TableColumn } from 'react-data-table-component';
const conditionalRowStyles: ConditionalStyles<Deal>[] = [
{
when: r => r.stage === 'Closed Won',
style: { backgroundColor: '#f0fdf4', borderLeft: '3px solid #16a34a' },
},
{
when: r => r.stage === 'Closed Lost',
style: { backgroundColor: '#fef2f2', opacity: 0.75 },
},
];
const columns: TableColumn<Deal>[] = [
{ name: 'Company', selector: r => r.company, sortable: true, grow: 2 },
{ name: 'Rep', selector: r => r.rep, sortable: true },
{
name: 'Value',
selector: r => r.value,
format: r => fmt(r.value),
sortable: true,
right: true,
conditionalCellStyles: [
{ when: r => r.value >= 200000, style: { fontWeight: 700, color: '#15803d' } },
{ when: r => r.value < 20000, style: { color: '#9ca3af' } },
],
},
{
name: 'Days open',
selector: r => r.daysOpen,
sortable: true,
right: true,
conditionalCellStyles: [
{ when: r => r.daysOpen > 90, style: { color: '#dc2626', fontWeight: 700 } },
{ when: r => r.daysOpen > 60, style: { color: '#d97706' } },
],
},
];
<DataTable columns={columns} data={data} conditionalRowStyles={conditionalRowStyles} highlightOnHover />