Ad
Highlight Rows In MUI-Datatables
I created a simple table using React.js and MUI-Datatables:
import MUIDataTable from "mui-datatables";
const columns = ["Name", "Company", "City", "State"];
const data = [
["Joe James", "Test Corp", "Yonkers", "NY"],
["John Walsh", "Test Corp", "Hartford", "CT"],
["Bob Herm", "Test Corp", "Tampa", "FL"],
["James Houston", "Test Corp", "Dallas", "TX"],
];
const options = {
filterType: 'checkbox',
};
<MUIDataTable
title={"Employee List"}
data={data}
columns={columns}
options={options}
/>
How can I add a custom CSS class to a single row inside the table. Lets say I want the second row with John Walsh to have a green background color.
Update:
Using customRowRender
allows to style a certain row but I am still not 100% happy with the solution because certain features like selectable rows do not work out of the box anymore:
const options = {
filterType: "checkbox",
customRowRender: (data, dataIndex, rowIndex) => {
let style = {};
if (data[0] === "John Walsh") {
style.backgroundColor = "green";
}
return (
<TableRow style={style}>
<TableCell />
<TableCell>
<Typography>{data[0]}</Typography>
</TableCell>
<TableCell>
<Typography>{data[1]}</Typography>
</TableCell>
<TableCell>
<Typography>{data[2]}</Typography>
</TableCell>
<TableCell>
<Typography>{data[3]}</Typography>
</TableCell>
</TableRow>
);
}
};
Ad
Answer
Here you go.
setRowProps: row => {
if (row[0] === "New") {
return {
style: { background: "snow" }
};
}
}
Ad
source: stackoverflow.com
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
Ad