No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

Conditional Style Object
PropertyTypeRequiredDescription
whenfunction: row => row.<yourfield>yeswhen 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
styleobject or (row) => objectnoAccepts 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 })
classNamesstring[]noIn 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',
      },
    },
  },
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' }),
  },
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 `
PropertyTypeRequiredDefaultDescription
conditionalRowStylesarrayno[]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}
  />
);
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}
  />
);
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}
        />
    );
);
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}
        />
    );
);
Note: classNames are applied to the TableCell component and concatenated to the rdt_TableCell class: