Issue
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?
Solution
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"
}
}
}
Answered By - H. Ross
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.