I am using an datatable of react-data-table-component, my table is generated from the API response data. I want to dynamically add a class to each of the rows generated based on the condition. How can I acheive this ?
https://www.npmjs.com/package/react-data-table-component
I am using the above datatable.
let columns= [
{
name: "ID",
selector: "ID",
sortable: true,
cell: row => <div>{row.ID}</div>
}];
<Datatable
columns={columns}
data={this.state.mydata} />
I want to add a custom CSS class to the entire row of this data table based on a condition.
I think you might be looking for the getTrProps callback in the table props:
getTrProps={ rowInfo => rowInfo.row.status ? 'green' : 'red' }
It's a callback to dynamically add classes or change style of a row element
Should work like this if I remember correctly:
getTrProps = (state, rowInfo, instance) => {
if (rowInfo) {
return {
className: (rowInfo.row.status == 'D') ? "status-refused" : "", // no effect
style: {
background: rowInfo.row.age > 20 ? 'red' : 'green'
}
}
}
return {};
}
render() {
<Datatable
columns={columns}
data={this.state.mydata}
getTrProps={this.getTrProps}
/>
}
example:
...
const conditionalRowStyles = [
{
when: row => row.calories < 300,
style: {
backgroundColor: 'green',
color: 'white',
'&:hover': {
cursor: 'pointer',
},
},
},
];
const MyTable = () => (
<DataTable
title="Desserts"
columns={columns}
data={data}
conditionalRowStyles={conditionalRowStyles}
/>
);
more info check here :) https://www.npmjs.com/package/react-data-table-component#conditional-row-styling
Related
I have a column in my table called Active. Data in this column is returned as 1 or 0 for Active and Inactive.
These values are not displayed as 1 or 0. Instead, using the render prop, I have a function generateFlagText which looks for the value and renders an MUI Chip component.
Users cannot search the column by typing Active or Inactive, they would have to type 1 or 0, but they don't know this.
How can I write a check for Active or Inactive to display only those rows in the table using the customSearchAndFilter prop in Material-Table?
This is my column and function:
{
title: <Typography className={classes.colHeader}>Active</Typography>,
field: "Active",
render: (rowData) => generateFlagText(rowData.Active),
// customFilterAndSearch: (term, rowData) => console.log(term), // term is the user input
},
...
export function generateFlagText(status) {
if (status === 1)
return (
<Chip
label={"Active"}
style={{
backgroundColor: "#D9F5FD",
border: "1px solid #5CC1EE",
borderRadius: "4px",
color: "#0063B8",
}}
/>
);
if (status === 0)
return (
<Chip
label={"Inactive"}
style={{
backgroundColor: "#FFEBF5",
border: "1px solid #F69AC6",
borderRadius: "4px",
color: "#A8396F",
}}
/>
);
}
You can make something like this
const data = { type: "active" };
const rows = [
{ name: 1, active: 1 },
{ name: 2, active: 0 }
];
function f(data, rows) {
const mappedValues = {
active: 1,
inactive: 0
};
const currFilter = [];
Object.keys(mappedValues).forEach((key) => {
if (key.includes(data.type)) {
currFilter.push(mappedValues[key]);
}
});
return rows.filter((row) =>
currFilter.some((filterValue) => filterValue === row.active)
);
}
console.log(f(data, rows));
User can input any text and function return rows which includes symbols from ui table.
But it would be easier to make not an input, but a selection of two values in a selector
I have a data grid using MUI. I want to hide a few rows and not display them based on a given condition and if a particular value exists in a column. How do I hide it? There seems to be props such as
hide
for columns but there is nothing for rows.
EDIT
The code is as follows
I want to hide the row from being displayed if a value exists in the 4th column (field: 'recvDistLocId')
and I want to hide the rows only when I press a button in the toolbar. So basically, its like a filter. Initially, all the data should be displayed and if I click the button, all rows with a value in the 4th column should disappear.
const columns = []
columns.push({
field: 'code',
headerName: nowrapHeader(appLanguages.serialCode[lang]),
flex: 1,
getApplyQuickFilterFn: getApplyFilterFnSameYear
});
columns.push({
field: 'brandId',
headerName: nowrapHeader(appLanguages.brand[lang]),
renderCell: (params) =>
getSelectCustomBodyRender(this.getBrandOptionMap(), params.row.brandId),
flex: 1,
});
columns.push({
field: 'slip',
headerName: nowrapHeader(appLanguages.slipNum[lang]),
renderCell: (params) => this.getSlipText(params.row.slip),
flex: 1,
});
columns.push({
field: 'recvDistLocId',
headerName: 'RecvDistLocId',
flex: 1,
hide: true,
});
/////This is the main data grid element code in the render()
<div style={{ height: 640, width: '100%' }}>
<DataGrid
sx={{
'& .MuiDataGrid-columnHeaderCheckbox .MuiDataGrid-columnHeaderTitleContainer': {
display: 'none',
},
}}
rows={serialsList || []}
columns={columns}
rowsPerPageOptions={[25, 50, 100]}
checkboxSelection={this.state.cancelShipFlag ? true : false}
disableSelectionOnClick={false}
components={{
Toolbar: NewToolbar,
}}
onSelectionModelChange={(ids) => {
const selectedIDs = new Set(ids);
const selectedRows = rowData.filter((row) => selectedIDs.has(row.id));
this.setState({ rowinfo: selectedRows });
this.setState({ selectedrows: ids });
//console.log('Selected rows: ' + this.state.selectedrows);
}}
selectionModel={this.state.selectedrows}
/>
</div>
filter the data based on the condition
// use setFilterValue to set the value of the clicked column e.g. recvDistLocId
const [filterValue, setFilterValue] = React.useState()
// assuming serialsList is array of strings
// use same case for comparing values
// use row.toLowerCase() !== filterValue.toLowerCase()
const rows = (serialsList || []).filter(row => row !== filterValue)
Then pass rows to the data grid
<DataGrid
rows={rows}
....
I have a static information in web page.
class MyStaticWebPage extends React.Component {
render() {
return (
<TopContainer>
<IconListContainer>
<LeftButton
Icon={MyIcon1}
color="#ffffff"
text="text1"
/>
<CenterButton
Icon={MyIcon2}
color="#eeeeee"
text="text2"
/>
<RightButton
Icon={MyIcon3}
color="#dddddd"
text="text3"
/>
</IconListContainer>
<IconListContainer>
<LeftButton
Icon={MyIcon4}
color="#cccccc"
text="text4"
/>
</IconListContainer>
</TopContainer>
);
}
}
This page is statically display in a row list, per line maximum three icons, and now I want to turn them dynamically, suppose I store icon props in a props array.
[
{
icon: 'MyIcon1',
color: '#ffffff',
text: 'text1'
},
{
icon: 'MyIcon2',
color: '#eeeeee',
text: 'text2'
},
{
icon: 'MyIcon3',
color: '#dddddd',
text: 'text3'
},
{
icon: 'MyIcon4',
color: '#cccccc',
text: 'text4'
}
]
Finally make page automatically rendered using this props array.
class MyStaticWebPage extends React.Component {
render() {
var rows = []
for (var i = 0; i <= parseInt(iconNum / 3); i++) {
// row level for loop
// rows.push(row)
for (var j = iconNum; j % 3 !== 0; j--) {
// icon level for loop
// rows.push(icon)
}
}
return (
<TopContainer>
{rows}
</TopContainer>
);
}
}
How to do with this through realistic react code?
Given you have a flat array but want to render it in rows of three the first thing you should do is chunk the array. Lodash has a method for this or you can do a simple enough reduce on your array.
const chunkedArray = icons.reduce((reduction, icon, index) => {
index % 3 ? reduction[reduction.length - 1].push(icon) : reduction.push([icon])
return reduction
}, [])
Now you have your data in the right shape we can easily map that to output jsx.
class IconListWrapper extends React.Component {
render() {
const { subList } = this.props
const buttonTypes = ['LeftButton', 'CenterButton', 'RightButton']
const Element = buttonTypes[index]
return (
<IconListContainer>
{subList.map((icon, index) => <Element
Icon={MyIcon1}
color="#ffffff"
text="text1"
/>)}
</IconListContainer>
);
}
}
class MyStaticWebPage extends React.Component {
render() {
return (
<TopContainer>
{chunkedArray.map((subList) => <IconListWrapper subList={subList} />)}
</TopContainer>
);
}
}
I think you're asking how to make sure you group the icons into groups of three using LeftButton, CenterButton, and RightButton.
I'll assume you start with something like this:
var icons = [
{
icon: 'MyIcon1',
color: '#ffffff',
text: 'text1'
},
{
icon: 'MyIcon2',
color: '#eeeeee',
text: 'text2'
},
{
icon: 'MyIcon3',
color: '#dddddd',
text: 'text3'
},
{
icon: 'MyIcon4',
color: '#cccccc',
text: 'text4'
}
];
then, see comments:
class MyStaticWebPage extends React.Component {
var buttonTypes = [LeftButton, CenterButton, RightButton];
render() {
var rows = [];
var children = [];
for (var i = 0; i < icons.length; i++) {
// x will be 0, 1, or 2
var x = i % 3;
// Get the button type to use
var buttonType = buttonTypes[x];
// Create the button using `createElement`
children.push(React.createElement(buttonType, icons[i]);
// If this is the last button of three, add these in a container
// and get a new array for children
if (x == 2) {
rows.push(<IconContainer>{children}</IconContianer>);
children = [];
}
}
// Handle any remaining children
if (children.length) {
rows.push(<IconContainer>{children}</IconContianer>);
}
return (
<TopContainer>
{rows}
</TopContainer>
);
}
}
As pointed out in other answers - the loop can be achieved with map function. To display them dynamically, you may wish to take a look at flexbox and use them in css.
One possible way of writing is like this:
var buttonTypes = [LeftButton, CenterButton, RightButton];
let table = [];
arr.forEach((el, i) => {
let Component = buttonTypes[i%3];
rows.push(
<Component
Icon={el.icon}
text={el.text}
color={el.color}
/>
)
if(i%3 == 2) {
table.push( <IconListContainer> {rows} </IconListContainer> )
rows = [];
}
})
if (rows.length) {
table.push( <IconListContainer> {rows} </IconListContainer> );
}
return (
<TopContainer>
{table}
</TopContainer>
);
You can try something like this.
const icons = [
{
icon: 'MyIcon1',
color: '#ffffff',
text: 'text1'
},
{
icon: 'MyIcon2',
color: '#eeeeee',
text: 'text2'
},
{
icon: 'MyIcon3',
color: '#dddddd',
text: 'text3'
},
{
icon: 'MyIcon4',
color: '#cccccc',
text: 'text4'
}
];
class MyStaticWebPage extends React.Component {
const menu = [
({ icon, color, text }) => (<LeftButton Icon={icon} color={color} text={text} />),
({ icon, color, text }) => (<CenterButton Icon={icon} color={color} text={text} />),
({ icon, color, text }) => (<RightButton Icon={icon} color={color} text={text} />)
];
render() {
return (
<TopContainer>
<IconListContainer>
{icons && icons.map((icon, i) => menu[i % 3](icon))}
</IconListContainer>
</TopContainer>
);
}
}
https://github.com/carlosrocha/react-data-components package does not allow sending html into a td cell. See:
My goal is hyperlink to that product.
My use is:
import React from 'react';
var DataTable = require('react-data-components').DataTable;
import PlainTable from './PlainTable'
class ReduxDataTable extends React.Component {
constructor(props) {
super(props);
}
processHeaders(){
var columns = [];
for (let i = 0; i < this.props.data.headers.length; i++){
var header = this.props.data.headers[i];
var item = {title: header, prop: header};
columns.push(item);
}
return columns;
}
render() {
var dataList = this.props.data.data;
console.log("datalist is", dataList);
console.log("datalist length is", dataList.length);
var headerList = this.processHeaders();
if(dataList.length > 2) {
return (
<DataTable
keys="name"
columns={headerList}
initialData={dataList}
initialPageLength={20}
initialSortBy={{ prop: headerList[0].title, order: 'descending' }}
pageLengthOptions={[ 20, 60, 120 ]}
/>
);
}
else {
return (
<PlainTable
headers={headerList}
rows={dataList}
/>
);
}
}
}
export { ReduxDataTable as default };
then just
return (
<div className="card">
<h2 className="style-1">Detailed Report</h2>
<br/>
<h2 className="style-1:after">Data about products </h2>
<ReduxDataTable data={data}/>
</div>
)
Plain table is a <table> in case there's few products.
The package does not show any "htmlTrue" option, as searching "html" show nothing useful. I'm getting the same issue with any html at all:
I'm not opposed to forking it, but is there a simple way to use this package and declare html here?
I didn't use that component, but looking through the code, it seems that you can use a render function to do what you need. See here: https://github.com/carlosrocha/react-data-components/blob/3d092bd375da0df9428ef02f18a64d056a2ea5d0/src/Table.js#L13
See the example here https://github.com/carlosrocha/react-data-components/blob/master/example/table/main.js#L17
Relevant code snippet:
const renderMapUrl =
(val, row) =>
<a href={`https://www.google.com/maps?q=${row['lat']},${row['long']}`}>
Google Maps
</a>;
const tableColumns = [
{ title: 'Name', prop: 'name' },
{ title: 'City', prop: 'city' },
{ title: 'Street address', prop: 'street' },
{ title: 'Phone', prop: 'phone', defaultContent: '<no phone>' },
{ title: 'Map', render: renderMapUrl, className: 'text-center' },
];
return (
<DataTable
className="container"
keys="id"
columns={tableColumns}
initialData={data}
initialPageLength={5}
initialSortBy={{ prop: 'city', order: 'descending' }}
pageLengthOptions={[ 5, 20, 50 ]}
/>
);
Try adding the render property to your dataList. Maybe something like this
var dataList = this.props.data.data;
for (let i=0; i<dataList.length; i++)
dataList[i].render = function(val, row) {return (
<a href={row.href}>row.title</a>
)}
I need to make a calendar with events and I decided to use react-big-calendar. But I need to make events of different colors. So each event will have some category and each category has corresponding color. How can I change the color of the event with react?
Result should look something like this
Sorry, I haven't read the documentation really well. It can be done with the help of eventPropGetter attribute. I've made it like this:
eventStyleGetter: function(event, start, end, isSelected) {
console.log(event);
var backgroundColor = '#' + event.hexColor;
var style = {
backgroundColor: backgroundColor,
borderRadius: '0px',
opacity: 0.8,
color: 'black',
border: '0px',
display: 'block'
};
return {
style: style
};
},
render: function () {
return (
<Layout active="plan" title="Planning">
<div className="content-app fixed-header">
<div className="app-body">
<div className="box">
<BigCalendar
events={this.events}
defaultDate={new Date()}
defaultView='week'
views={[]}
onSelectSlot={(this.slotSelected)}
onSelectEvent={(this.eventSelected)}
eventPropGetter={(this.eventStyleGetter)}
/>
</div>
</div>
</div>
</Layout>
);
}
Additional tip on how to style different kinds of events: In the myEvents array of event objects, I gave each object a boolean property isMine, then I defined:
<BigCalendar
// other props here
eventPropGetter={
(event, start, end, isSelected) => {
let newStyle = {
backgroundColor: "lightgrey",
color: 'black',
borderRadius: "0px",
border: "none"
};
if (event.isMine){
newStyle.backgroundColor = "lightgreen"
}
return {
className: "",
style: newStyle
};
}
}
/>
This solution is simple !
eventPropGetter={(event) => {
const backgroundColor = event.allday ? 'yellow' : 'blue';
return { style: { backgroundColor } }
}}
change the condition according to your need and it is done.
Siva Surya's solution is the fastest, and I have added the color property as well. Thanks...
import React, {useEffect, useLayoutEffect} from 'react';
import { Calendar, momentLocalizer,globalizeLocalizer } from 'react-big-calendar'
import moment from 'moment';
import { connect } from 'frontity';
import BackgroundWrapper from 'react-big-calendar/lib/BackgroundWrapper';
const MyCalendar = ({ actions, state, objetoBloque, formato }) => {
const localizer = momentLocalizer(moment);
const myEventsList = [
{
title: 'My Event',
start: '2022-06-21T13:45:00-05:00',
end: '2022-06-25T14:00:00-05:00',
// elcolor:'red'
colorEvento:'red'
},
{
title: 'Otro',
start: '2022-06-15T13:45:00-05:00',
end: '2022-06-23T14:00:00-05:00',
colorEvento:'green',
color:'white'
}
];
return(
<div>
<Calendar
// defaultDate = {defaultDate}
localizer={localizer}
events={myEventsList}
startAccessor="start"
endAccessor="end"
style={{ height: 500 }}
BackgroundWrapper = "red"
eventPropGetter={(myEventsList) => {
const backgroundColor = myEventsList.colorEvento ? myEventsList.colorEvento : 'blue';
const color = myEventsList.color ? myEventsList.color : 'blue';
return { style: { backgroundColor ,color} }
}}
/>
</div>
)
}
export default connect(MyCalendar);
Searching for how to change the border colour of an event also lead me here, and I couldn't find the answer anywhere else, but found that adding the following done the trick:
border: "black",
borderStyle: "solid"