0

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

Anjali Patel
  • 27
  • 8
  • Potential duplicate https://stackoverflow.com/questions/67258803/define-striped-color-in-react-data-table-component – exside Dec 30 '22 at 11:00

1 Answers1

1

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"
    }
  }
}
H. Ross
  • 470
  • 3
  • 17