Conditional Style Object

Property	Type	Required	Description
when	function: row => row.<yourfield>	yes	when accepts a callback that gives you access to your data. The when callback must return a boolean to determine if the style will be applied. e.g. row => row.status === 'completed' will apply the style when the row.status field is completed
style	object or (row) => object	no	Accepts a css-in-js style object. Alternativly, you can also specify callback that has access to the row props. e.g. (row) => ({ backgroundColor: row.isSpecial ? 'pink' : inherit })
classNames	string[]	no	In some cases you may want to apply conditional classNames. Accepts an array of classes: e.g. ['class1', 'class2'].

A Conditional Style Object allows you to apply a specific style object based on you data:

Style Object

For example, let's say you want to apply a style when calories exceed 300:

{
    when: row => row.calories < 300,
    style: {
      backgroundColor: 'green',
      color: 'white',
      '&:hover': {
        cursor: 'pointer',
      },
    },
  },
Copy

Style Callback

Alternativly, you can use a callback instead of a style object that has access to the row data:

{
    when: row => row.calories < 300,
    style: row => ({ backgroundColor: row.isSpecial ? 'pink' : 'green' }),
  },
Copy

Conditional Row Styling

RDT allows you to override styling based on your data. Currently, you can apply conditional logic for rows using the DataTable property `

Property	Type	Required	Default	Description
conditionalRowStyles	array	no	[]	Allows an array of conditional style objects

Example style Object

The following will style the background color of a row to green and set a hover effect when the expression row => row.calories < 300 evaluates to true

...
const conditionalRowStyles = [
  {
    when: row => row.calories < 300,
    style: {
      backgroundColor: 'green',
      color: 'white',
      '&:hover': {
        cursor: 'pointer',
      },
    },
  },
  // You can also pass a callback to style for additional customization
  {
    when: row => row.calories < 400,
    style: row => ({ backgroundColor: row.isSpecial ? 'pink' : 'inerit' }),
  },
];

const MyTable = () => (
  <DataTable
    title="Desserts"
    columns={columns}
    data={data}
    conditionalRowStyles={conditionalRowStyles}
  />
);
Copy

Example classNames array

You can apply classNames instead or in addition to style:

...
const conditionalRowStyles = [
  {
    when: row => row.calories < 300,
    classNames: ['luke', 'leia'],
  },
];

const MyTable = () => (
  <DataTable
    title="Desserts"
    columns={columns}
    data={data}
    conditionalRowStyles={conditionalRowStyles}
  />
);
Copy

Note: classNames are applied to the TableRow component and concatenated to the rdt_TableRow class:

Conditional Cell Styling

Example style Object

You can also style individual cells by applying conditionalCellStyles to a column definition:

import DataTable from 'react-data-table-component';

const columns = [
	{
		name: 'Name',
		selector: row => row.name,
	},
	{
		name: 'Calories (g)',
		selector: row => row.calories,
		conditionalCellStyles: [
			{
				when: row => row.calories < 300,
				style: {
					backgroundColor: 'rgba(63, 195, 128, 0.9)',
					color: 'white',
					'&:hover': {
						cursor: 'pointer',
					},
				},
			},
			{
				when: row => row.calories >= 300 && row.calories < 400,
				style: {
					backgroundColor: 'rgba(248, 148, 6, 0.9)',
					color: 'white',
					'&:hover': {
						cursor: 'pointer',
					},
				},
			},
			{
				when: row => row.calories >= 400,
				style: {
					backgroundColor: 'rgba(242, 38, 19, 0.9)',
					color: 'white',
					'&:hover': {
						cursor: 'not-allowed',
					},
				},
			},
      // You can also pass a callback to style for additional customization
      {
        when: row => row.calories < 600,
        style: row => ({ backgroundColor: row.isSpecial ? 'pink' : 'inerit' }),
      },
		],
	},
];

function MyComponent() {
	return (
		<DataTable
			columns={columns}
			data={data}
		/>
	);
);
Copy

Example classNames Object

As with conditionalRows you can also apply classNames to a column cell instead of or in addition to style:

import DataTable from 'react-data-table-component';

const columns = [
	{
		name: 'Name',
		selector: row => row.name,
	},
	{
		name: 'Calories (g)',
		selector: row => row.calories,
		conditionalCellStyles: [
			{
				when: row => row.calories < 300,
				classNames: ['success'],
			},
			{
				when: row => row.calories >= 300 && row.calories < 400,
				classNames: ['warning'],
			},
			{
				when: row => row.calories >= 400,
				classNames: ['error'],
			},
		],
	},
];

function MyComponent() {
	return (
		<DataTable
			columns={columns}
			data={data}
		/>
	);
);
Copy

Note: classNames are applied to the TableCell component and concatenated to the rdt_TableCell class: