CODEWITHSUNDEEP
htmlcssreactjs
Anjali Patel
Anjali Patel

Reputation: 37

I want to change the background for striped in react-data-table-component?

here the changes herder row BG color work for me but how we can change the BG color of the striped row.

import React from 'react';
    import DataTable from 'react-data-table-component';
    
    const tableCustomStyles = {
        headRow: {
          style: {
            color:'#223336',
            backgroundColor: '#e7eef0'
          },
        },
        striped: {
            default: 'red'
        },
      }
    
    function App() {
      return (
        <div className="App">
          <h3>DataTable in React - <a href="https://www.cluemediator.com" target="_blank">Clue Mediator</a></h3>
          <DataTable
            title="Employees"
            columns={columns}
            data={data}
            pagination
            highlightOnHover
            striped
            customStyles={tableCustomStyles}
          />
        </div>
      );
    }
    
    export default App;

here I used the react-data-table-component and want to change the customized BG color of the striped row. how can we do that?

enter image description here

Upvotes: 1

Views: 5157

Answers (2)

Vyacheslav Orlovsky
Vyacheslav Orlovsky

Reputation: 426

The solution by H. Ross did not work for me. Another way to make striped rows there is to use CSS selector:

customStyles={{
  rows: {
    style: {
      backgroundColor: '#FFFFFF',
      '&:nth-child(2n)': {
        backgroundColor: '#EEEEEE',
      },
    },
  },
}}

Upvotes: 0

H. Ross
H. Ross

Reputation: 540

After looking through the documentation for using custom styles found here and the available fields here, it appears you need to nest the striped styles inside of a row object in the style config.

Edit for comment:

To change the order of striped and non-striped rows, you could just swap the colors of the regular rows and striped rows (i.e. set the regular row to have the striped attributes and vise-versa).

Your tableCustomStyles should look like this (for even row stripes):

const tableCustomStyles = {
  headRow: {
    style: {
      color:'#223336',
      backgroundColor: '#e7eef0'
    },
  },
  rows: {
    style: {
      color: "STRIPEDCOLOR",
      backgroundColor: "STRIPEDCOLOR"
    },
    stripedStyle: {
      color: "NORMALCOLOR",
      backgroundColor: "NORMALCOLOR"
    }
  }
}

Upvotes: 3

Related Questions