Is there any possiblity to display partial color to the string the devextreme data grid cell.
For example values which are greather than 5000 should be in red and rest should have default color.
Eg:
The devextreme datagrid has a cell with value "4995,4218,4445,4506,5145". I need to show only 5145 as red and rest values should not apply any color, because only 5145 is there 5000.
You can use a cell template to accomplish this.
<DataGrid>
<Column
dataField="myValues"
cellRender={renderGridCell}
/>
</DataGrid>
const renderGridCell = (cellData) => {
return (
// this is just an example. access the cellData parameter to get the values of your object
[4995,4218,4445,4506,5145]
.map(x => <span style={{ backgroundColor: x > 5000 ? 'red' : undefined }}>{x}</span>)
.reduce((acc, x) => acc === null ? x : <>{acc}, {x}</>, null)
);
}
Here is the cell data parameter description. You probably need to access cellData.value or cellData.data.
Related
I am new to coding and decided to use react-heatmap-grid for heatmap in a web application. I have tried numerous ways and searched the internet but I didn't find an answer. I have 7 rows and 24 columns for days and hours (which makes 168 cells) and im trying to get the data in correctly. Right now it maps the whole array in each cell but I need every element in array in different cell. Currently the mapping of data looks like this:
const testArr = [];
for (var i = 1; i<169; i++){
testArr.push(i);
}
const data = new Array(yLabels.length)
.fill(0)
.map(() =>
new Array(xLabels.length)
.fill(0)
.map(() => TestArr)
)
And the heatmap is created like this:
<div className='heatmap'>
<HeatMap
xLabels={xLabels}
yLabels={yLabels}
yLabelWidth={150}
xLabelsLocation={"top"}
xLabelsVisibility={xLabelsVisibility}
data={data}
cellStyle={(background, value, min, max, data, x, y) => ({
background: `rgb(127,255,0, ${1 - (max - value) / (max - min)})`,
fontSize: "12px",
fontFamily: "Arial",
color: `rgb(30,0,0)`,
})}
cellRender={value => value && `${value}`}
/>
</div>
How can I insert the data in cells so that they all wouldn't have the array in them?
I ditched the mapping and found another solution. Instead of mapping the data, I just use an array of arrays and send it trough to heatmap as data.
<div className='heatmap'>
<HeatMap
xLabels={xLabels}
yLabels={yLabels}
yLabelWidth={150}
xLabelsLocation={"top"}
xLabelsVisibility={xLabelsVisibility}
data={arrayOfArrays}
...
I have a datatable/datagrid that is printing a list of data through an array of objects with different values. How do I target a specific object or in this case column and change its rows value from true/false to asterisk ***** to hide from the user.
Array as shown in console with objects and values
Datatable with example values
const [userList, setUserList]=useState([]);
useEffect(()=> {
createAPIEndpoints(ENDPOINTS.USERLIST).fetchAll().then(res =>{
setUserList(res.data);
})
.catch(err => console.log(err))},[]);
return (
<div style={{ height: 600, width: '85%',marginLeft:"30vh"}}>
<DataGrid
rows={userList}
columns={newuserList}
pageSize={10}
rowsPerPageOptions={[10]}
checkboxSelection
/>
<div>
This is the code that I'm using to fetch a list of user accounts and storing its values in a material ui Datagrid row. I want to target a specific key and its values for example 'passwordIsChanged' and replace its values from true/false to asterisk ****. Any ideas? As shown in the image.
This should be very easy. Before setting the userList just update it.
Check this line out now data.forEach(user => user.passwordIsChanged = '*****')
There was two equal signs before now its only one. That was my mistake. It should work now.
const [userList, setUserList]=useState([]);
useEffect(()=> {
createAPIEndpoints(ENDPOINTS.USERLIST).fetchAll().then(res =>{
// here update the data
let data = res.data
data.forEach(user => user.passwordIsChanged = '*****') // something like this, check your data structure
console.log(data) // confirm/debug data
setUserList(data);
})
.catch(err => console.log(err))},[]);
return (
<div style={{ height: 600, width: '85%',marginLeft:"30vh"}}>
<DataGrid
rows={userList}
columns={newuserList}
pageSize={10}
rowsPerPageOptions={[10]}
checkboxSelection
/>
<div>
I'm struggling with conditional rendering views.
I usually use only double conditional rendering views, with a useState(true/false).
But today I need a triple conditional rendering view.
How can I build something like if color = red, you render red, if color = blue you render blue, if color = green you render green.
const TripleConditionalRendering = () => {
const [ color, setColor ] = useState("")
const handleClickRed = () => {
setColor("red")
}
const handleClickBlue = () => {
setColor("blue")
}
const handleClickRed = () => {
setColor("blue")
}
return (
<button onClick={handleClickRed}/>
<button onClick={handleClickBlue}/>
<button onClick={handleClickGreen}/>
{ color == red ? (
<p> the color is : red</p>
) : (
<p> the color is : blue or green, sorry cant make triple conditional rendering</p>
)}
// how can I add those ?
<p> the color is : blue</p>
<p> the color is : green</p>
)
}
It looks like you've already worked out that if it's not red, it must be blue or green.
Nesting logic
The format for a ternary is as follows:
predicate ? true_expression : false_expression
Since you already know that if the statement is false, it can be one of the other options, just nest the ternary, like so:
predicate ? true_expression : (nested_predicate ? nested_true : nested false)
In your specific example, this becomes:
color == red
? <red/>
: color == blue
? <blue/>
: <green/>
Of course, logically, there's no reason why the logic for blue and green should be nested under the logic for red, or why any color should be nested under another. In this case it might make more sense and be more readable if there was one ternary per color:
{ color == red ? <red/> : null }
{ color == blue ? <blue/> : null }
{ color == green ? <green/> : null }
Or perhaps a switch statement would be even more readable
First of all, I appriciate it, that you are checking out my question. Thanks for that.
I am working on a table which is realised with "material-table" for React. My problem is that, I need custom filtering. I managed to get it working for all rows except the ones which are dates. Although the filter function is doing it's job and returns the row which matches the filter value, it also returns every row which has a null in the same column. I will provide the code below and will appriciate any help given.
{
title: "def. L-Datum",
field: "definitiver_Liefertermin",
type: "date",
filterComponent: (props) => {
return (
<KeyboardDatePicker
style={{ width: 140 }}
error="none"
fullWidth
clearable
autoOk
onChange={(e) =>
props.onFilterChanged(
props.columnDef.tableData.id,
e === null ? null : e._d
)
}
value={
props.columnDef.tableData.filterValue !== undefined &&
props.columnDef.tableData.filterValue !== null
? props.columnDef.tableData.filterValue
: null
}
format="DD-MM-YYYY"
/>
);
},
The shown code is doing following:
Upon entering a date, it filters the order array to find matching values in each element. When found, it will be displayed in the table. As I said, it is doing that, however it is also showing every row which has the value null in the same column, in the pictures it is the first two rows.
I am working through the Flavio Copes Pixel Art app in his React course and I'd like to add a button that can resize my "canvas". The canvas is a 2D array that is initialized like so:
const [matrix, setMatrix] = useState(
Array(size)
.fill()
.map(() => Array(size).fill(0)));
The size variable is passed down as a prop from the parent component, which has a hook to manage the state from an input field. The matrix is used to render "Pixel" components (30px x 30px divs) by mapping through each row/col like so:
<div className={css(styles.canvas)}>
{matrix.map((row, rowIndex) =>
row.map((_, colIndex) => {
return (
<Pixel
key={`${rowIndex}-${colIndex}`}
background={Colors[matrix[rowIndex][colIndex]]}
onClick={() => changeColor(rowIndex, colIndex)}
/>
);
})
)}
</div>
I am able to update the width of the canvas (# of columns), but I think that the number of total Pixels remain constant and subsequent rows are added/subtracted that do not equal the number of columns. You can replicate the error by inputting a new value into "Canvas Size" and clicking "Resize Canvas" on my demo.
Why do the number of rows differ from the number of columns?
All of the code is available in my repo.
I do not see change of columns/rows in your repo. This function should do the trick
const updateMatrixSize = (size) => {
setMatrix(
matrix.length > size
? matrix.slice(0, size).map(it => it.slice(0, size)))
: [
...matrix.map(it => ([
...it,
...new Array(size - matrix.length).fill(0)
])
),
...new Array(size - matrix.length).fill(0)
]
)
}
PS you have a typo in your repo
props.setMsatrixState(newMatrix);