reactjsmaterial-uimaterial-table
react material-table won't render icon when clicked
I have searched for a few days. Until now I cannot figured it out. I want my visibility icon change to hide, when clicked. But I don't know why it not automatically rendering. I must to type something on search bar to get the visibility_off icon.
I read documentation but, it not works https://material-table.com/#/docs/features/actions and this https://material-table.com/#/docs/features/component-overriding
this my code
(rowData) => (
rowData.isActive === 1 ?
{
icon: "visibility_off",
tooltip: "Hide Row",
onClick: () => {
console.log(rowData);
// console.log(event);
// console.log(row.isActive);
console.log(tableConfig.data[rowData.tableData.id].isActive);
console.log(rowData.tableData.id);
tableConfig.data[rowData.tableData.id].isActive = !tableConfig.data[rowData.tableData.id].isActive;
setTableConfig(tableConfig);
// console.log(row.isActive);
/*// console.log(row.tableData.id);
//find index
console.log(data[row.tableData.id]);
//change the data value
data[row.tableData.id].isActive = 0;
//set data with new data
setData(data);*/
},
} :
{
icon: "visibility",
tooltip: "Show Row",
onClick: () => {
console.log(rowData);
// console.log(event);
// console.log(row.isActive);
console.log(tableConfig.data[rowData.tableData.id].isActive);
console.log(rowData.tableData.id);
tableConfig.data[rowData.tableData.id].isActive = !tableConfig.data[rowData.tableData.id].isActive;
setTableConfig(tableConfig);
// console.log(row.isActive);
},
}
And this is the full code.
const [tableConfig, setTableConfig] = useState({
columns:[
{ title: "ID", field: "processID" },
{ title: "Config Name", field: "configName" },
{ title: "Status", field: "processStatus" },
{ title: "Progress", field: "progressPercentage", type: "numeric" },
{ title: "Start Time", field: "lastStartDateTime", type: "datetime" },
{ title: "End Time", field: "lastEndDateTime", type: "datetime" },
{ title: "Total Input Records", field: "lastInputRecords", type: "numeric" },
{ title: "Total Output Records", field: "masterRecords", type: "numeric" },
],
data:[
{
processID: "191030070911880",
configName: "Test2333",
configDesc: "191030070911880 Test2333",
userID: "1",
createdDateTime: "2019-10-30 03:10:06.844",
lastModifiedDateTime: "2020-01-18 02:24:59.051",
isActive: 0,
lastEditUserID: "1",
processStatus: "success",
progressPercentage: 0,
lastStartDateTime: "2020-01-18 02:32:45.976",
lastEndDateTime: "2020-01-18 02:32:56.197",
lastInputRecords: 15,
masterRecords: 15,
systemConfig: null,
dedupConfig: null
},
{
processID: "191030072229070",
configName: "Testimony2",
configDesc: "191030072229070 Testimony2",
userID: "1",
createdDateTime: "2019-10-30 03:22:34.732",
lastModifiedDateTime: "2019-10-30 03:22:34.732",
isActive: 1,
lastEditUserID: "1",
processStatus: "error",
progressPercentage: 0,
lastStartDateTime: "2020-01-18 02:32:36.533",
lastEndDateTime: "2020-01-18 02:32:36.566",
lastInputRecords: 15,
masterRecords: 0,
systemConfig: null,
dedupConfig: null
},
{
processID: "191030084112873",
configName: "Testimony3",
configDesc: "191030084112873 Testimony3",
userID: "1",
createdDateTime: "2019-10-30 04:41:19.856",
lastModifiedDateTime: "2019-10-30 04:41:19.856",
isActive: 1,
lastEditUserID: "1",
processStatus: "error",
progressPercentage: 0,
lastStartDateTime: "2020-01-18 02:33:59.231",
lastEndDateTime: "2020-01-18 02:33:59.256",
lastInputRecords: 15,
masterRecords: 0,
systemConfig: null,
dedupConfig: null
},
{
processID: "191104084001318",
configName: "TestA",
configDesc: "191104084001318 TestA",
userID: "1",
createdDateTime: "2019-11-04 03:40:44.697",
lastModifiedDateTime: "2019-11-04 05:45:45.388",
isActive: 1,
lastEditUserID: "1",
processStatus: "success",
progressPercentage: 0,
lastStartDateTime: "2019-11-04 05:43:56.451",
lastEndDateTime: "2019-11-04 05:44:06.846",
lastInputRecords: 15,
masterRecords: 15,
systemConfig: null,
dedupConfig: null
},
{
processID: "adv191104084317062",
configName: "TestA1",
configDesc: "adv191104084317062 TestA1",
userID: "1",
createdDateTime: "2019-11-04 03:43:29.58",
lastModifiedDateTime: "2019-11-04 05:45:45.732",
isActive: 1,
lastEditUserID: "1",
processStatus: "success",
progressPercentage: 0,
lastStartDateTime: "2019-11-04 05:43:49.78",
lastEndDateTime: "2019-11-04 05:44:01.566",
lastInputRecords: 15,
masterRecords: 15,
systemConfig: null,
dedupConfig: null
},
{
processID: "adv191128105553518",
configName: "TestAAA",
configDesc: "adv191128105553518 TestAAA",
userID: "1",
createdDateTime: "2019-11-28 05:56:00.845",
lastModifiedDateTime: "2019-11-28 06:21:04.551",
isActive: 1,
lastEditUserID: "1",
processStatus: "success",
progressPercentage: 0,
lastStartDateTime: "2020-01-18 02:34:04.565",
lastEndDateTime: "2020-01-18 02:34:15.933",
lastInputRecords: 15,
masterRecords: 15,
systemConfig: null,
dedupConfig: null
}
],
actions:[
{
icon: "play_arrow",
tooltip: "Run",
onClick: () => {
console.log("run button is clicked");
}
},
{
icon: "description",
tooltip: "Summary",
onClick: () => {
console.log("summary button is clicked");
}
},
{
icon: "edit",
tooltip: "Edit",
onClick: (event, row) => {
// console.log(row.tableData.id);
//cari indeks
/*console.log(data[row.tableData.id]);
//ganti data yang mau diganti
data[row.tableData.id].configName = "ase";
//mengembalikan data dengan isi yang sama persis seperti sebelumnya
setData(data);*/
}
},
{
icon: "file_copy",
tooltip: "Clone",
onClick: () => {
console.log("clone button is clicked");
}
},
{
icon: "delete",
tooltip: "Delete",
onClick: () => {
console.log("Delete button is clicked");
}
},
(rowData) => (
rowData.isActive === 1 ?
{
icon: "visibility_off",
tooltip: "Hide Row",
onClick: () => {
console.log(rowData);
// console.log(event);
// console.log(row.isActive);
console.log(tableConfig.data[rowData.tableData.id].isActive);
console.log(rowData.tableData.id);
tableConfig.data[rowData.tableData.id].isActive = !tableConfig.data[rowData.tableData.id].isActive;
setTableConfig(tableConfig);
// console.log(row.isActive);
/*// console.log(row.tableData.id);
//cari indeks
console.log(data[row.tableData.id]);
//ganti data yang mau diganti
data[row.tableData.id].isActive = 0;
//mengembalikan data dengan isi yang sama persis seperti sebelumnya
setData(data);*/
},
} :
{
icon: "visibility",
tooltip: "Show Row",
onClick: () => {
console.log(rowData);
// console.log(event);
// console.log(row.isActive);
console.log(tableConfig.data[rowData.tableData.id].isActive);
console.log(rowData.tableData.id);
tableConfig.data[rowData.tableData.id].isActive = !tableConfig.data[rowData.tableData.id].isActive;
setTableConfig(tableConfig);
// console.log(row.isActive);
},
}
)
]
});
and this is the result. Please help me. Thank you.
NB: because of my reputation. I cannot post image here. Sorry
Solution
First of all you can separate your actions array.
const actions = [
{
icon: "description",
tooltip: "Run",
onClick: () => {
console.log("run button is clicked");
}
},
{
icon: "description",
tooltip: "Summary",
onClick: () => {
console.log("summary button is clicked");
}
},
{
icon: "edit",
tooltip: "Edit",
onClick: (event, row) => { }
}, {
icon: "visibility_off",
tooltip: "Hide Row",
onClick: () => { },
},
(rowData) => {
return {
icon: rowData.isActive === 1 ? 'visibility_off' : 'visibility',
tooltip: "Hide Row",
onClick: (event, row) => {
clickHandler(row)
}
}
}
];
const [tableConfig, setTableConfig] = React.useState({
columns: [
{ title: "ID", field: "processID" },
{ title: "Config Name", field: "configName" },
{ title: "Status", field: "processStatus" },
{ title: "Progress", field: "progressPercentage", type: "numeric" },
{ title: "Start Time", field: "lastStartDateTime", type: "datetime" },
{ title: "End Time", field: "lastEndDateTime", type: "datetime" },
{ title: "Total Input Records", field: "lastInputRecords", type: "numeric" },
{ title: "Total Output Records", field: "masterRecords", type: "numeric" },
],
data: [
{
processID: "191030070911880",
configName: "Test2333",
configDesc: "191030070911880 Test2333",
userID: "1",
createdDateTime: "2019-10-30 03:10:06.844",
lastModifiedDateTime: "2020-01-18 02:24:59.051",
isActive: 0,
lastEditUserID: "1",
processStatus: "success",
progressPercentage: 0,
lastStartDateTime: "2020-01-18 02:32:45.976",
lastEndDateTime: "2020-01-18 02:32:56.197",
lastInputRecords: 15,
masterRecords: 15,
systemConfig: null,
dedupConfig: null
},
{
processID: "191030072229070",
configName: "Testimony2",
configDesc: "191030072229070 Testimony2",
userID: "1",
createdDateTime: "2019-10-30 03:22:34.732",
lastModifiedDateTime: "2019-10-30 03:22:34.732",
isActive: 1,
lastEditUserID: "1",
processStatus: "error",
progressPercentage: 0,
lastStartDateTime: "2020-01-18 02:32:36.533",
lastEndDateTime: "2020-01-18 02:32:36.566",
lastInputRecords: 15,
masterRecords: 0,
systemConfig: null,
dedupConfig: null
},
{
processID: "191030084112873",
configName: "Testimony3",
configDesc: "191030084112873 Testimony3",
userID: "1",
createdDateTime: "2019-10-30 04:41:19.856",
lastModifiedDateTime: "2019-10-30 04:41:19.856",
isActive: 1,
lastEditUserID: "1",
processStatus: "error",
progressPercentage: 0,
lastStartDateTime: "2020-01-18 02:33:59.231",
lastEndDateTime: "2020-01-18 02:33:59.256",
lastInputRecords: 15,
masterRecords: 0,
systemConfig: null,
dedupConfig: null
},
{
processID: "191104084001318",
configName: "TestA",
configDesc: "191104084001318 TestA",
userID: "1",
createdDateTime: "2019-11-04 03:40:44.697",
lastModifiedDateTime: "2019-11-04 05:45:45.388",
isActive: 1,
lastEditUserID: "1",
processStatus: "success",
progressPercentage: 0,
lastStartDateTime: "2019-11-04 05:43:56.451",
lastEndDateTime: "2019-11-04 05:44:06.846",
lastInputRecords: 15,
masterRecords: 15,
systemConfig: null,
dedupConfig: null
},
{
processID: "adv191104084317062",
configName: "TestA1",
configDesc: "adv191104084317062 TestA1",
userID: "1",
createdDateTime: "2019-11-04 03:43:29.58",
lastModifiedDateTime: "2019-11-04 05:45:45.732",
isActive: 1,
lastEditUserID: "1",
processStatus: "success",
progressPercentage: 0,
lastStartDateTime: "2019-11-04 05:43:49.78",
lastEndDateTime: "2019-11-04 05:44:01.566",
lastInputRecords: 15,
masterRecords: 15,
systemConfig: null,
dedupConfig: null
},
{
processID: "adv191128105553518",
configName: "TestAAA",
configDesc: "adv191128105553518 TestAAA",
userID: "1",
createdDateTime: "2019-11-28 05:56:00.845",
lastModifiedDateTime: "2019-11-28 06:21:04.551",
isActive: 1,
lastEditUserID: "1",
processStatus: "success",
progressPercentage: 0,
lastStartDateTime: "2020-01-18 02:34:04.565",
lastEndDateTime: "2020-01-18 02:34:15.933",
lastInputRecords: 15,
masterRecords: 15,
systemConfig: null,
dedupConfig: null
}
],
});
As you can see I added clikHandler() function in your action array. This is for setting your tableconfig. You set tableConfig in a wrong way. You can check how to set immutable way your state.
const clickHandler = (rowData) => {
setTableConfig({
columns: [...tableConfig.columns],
data: tableConfig.data.map((item, index) => {
if (index !== rowData.tableData.id) {
return { ...item }
}
return {
...item,
isActive: item.isActive === 1 ? 0 : 1
}
})
});
}
btw you should change your action in your jsx part as actions={actions}
You can see the working example 
Note
In functional component setState does not pretend to merge entire states. You have to merge yourselves.
- How to add a hover-over tooltip to rhandonstable header cell?
- How to detect the right encoding for read.csv?
- Rcpp Rf_warningcall compiler warnings
- Modify the name of factor variables in lm function(summary function)
- Extreme value analysis and quantile estimation using log Pearson type 3 (Pearson III) distribution - R vs Python
- How to hide NAs when using xlsx::saveWorkbook?
- How do I retrieve a simple numeric value from a named numeric vector in R?
- Adding an image in navbar and adjusting alignment in Rmarkdown
- Matching pair-wise columns from left to right across rows in one dataframe to another dataframe and adding new columns with matching values
- Income to outcome flow chart in Sankey plotly R
- color mapping in geom_conn_bundle not showing correctly
- Print R package startup message AFTER automatic package conflict messages instead of before
- Summing a set of R dataframe rows (column-wise), while retaining the first n columns
- Added variable / partial regression plots for groups in an interaction?
- how to make a topoplot in R with coordinates variable distribution
- List of all functions in base R?
- Plotting multiple plots for different initial conditions in one graph
- Printing repetitively on the same line in R
- Generating UI/Server based on initial selection
- Subset dataframe based on pickerInput
- How to let user pick the data in R-shiny?
- Couldn't show my simple bar charts separately on Shiny R dashboardBody
- How to programmatically filter contents of a second shiny app displayed via iframe
- How to select specific interesting groups for the boxplot in R Shiny app?
- Crosstable and Plot grouping with reactive values
- Is there a way to make multiple Shiny picker inputs where the selections must be disjoint?
- Delay/avoid duplication of shiny server side functions until after credentials
- Predictions only returns value "1"
- How to display a busy indicator in a shiny app?
- Append doesn't work when writing to CSV in R