@Domino987 so I found the issue. The issue appears when I have rowStyle as a function
<MaterialTable
title=""
columns={React.useMemo(() => [
{ title: "ID", field: "id" },
{ title: "Name", field: "name" }
], [])}
data={data}
options={{
selection: true,
grouping: true,
filtering: true,
padding: 'dense',
columnsButton: true,
rowStyle: (rowdData : Sample) => {
if (rowdData.id === 1) {
return {
backgroundColor: 'lightblue'
}
} else {
return {
backgroundColor: 'lightpink'
}
}
}
}}
onSelectionChange={handleSelectionChange}
/>Sandbox sample : https://codesandbox.io/s/loving-pine-m0bgz?file=/src/App.tsx:1009-1295
@Domino987 The project is an enterprise project therefore I can't share the codes but I show you what I do in the projects related to use tableRef.
let tableRef = React.createRef();
useEffect(() => {
console.log(tableRef);
tableRef.current.onQueryChange();
}, [tableRef]);
<MaterialTable
tableRef={tableRef}
...
/>At first, I want to refresh table after the Crud operations and I did it but I have realized the problem that is if the
last data (existing last data) was deleted in second page then projects had crushed. The message of the error is tableRef current is null.
current-is-always-null-when-using-react-createref
I encountered great difficulty with material-table and Typescript.
It refuses to work.
here is my code, and I'd be happy to get an elaborated example for MT+TS
return (
// <!--<MuiThemeProvider theme={MainTheme}>
<MainBox
aria-label="Categories Main Box"
id="Categories_Main_Box"
name="Categories_Main_Box"
role="article"
>
{loading_lists === false ? (
<MainMenuContentWrapper
aria-label="Categories Content Wrapper"
id="Categories_Content_Wrapper"
name="Categories_Content_Wrapper"
role="application"
>
<ContentBox
aria-label="Categories Content Table Box"
id="Categories_Content_Table_Box"
name="Categories_Content_Table_Box"
role="directory"
>
<MaterialTable
aria-label="Categories Material Table"
id="Categories_Material_Table"
name="Categories_Material_Table"
role="table"
style={TableStyle}
title={
// <h4 className={classes.tableTitleStyle}>Categories list</h4>
<div style={TableTitleDivStyle}
aria-label="Categories Table Title div"
id="Categories_Table_Title_div"
name="Categories_Table_Title_div"
role="directory"
>
<TableTitleStyled
aria-label="Categories Table Title"
id="Categories_Table_Title"
name="Categories_Table_Title"
role="note"
>
Categories list
</TableTitleStyled>
</div>
}
// when using useState
//--------------------------------------
columns={local_categories_list.columns}
// when using useState
//--------------------------------------
data={local_categories_list.data}
components={{
Toolbar: props => (
<div
//style={{ display: 'flex', alignItems: 'center', }}
style={MTableToolbarStyle}
aria-label="Categories Table Toolbar Div"
id="Categories_Table_Toolbar_Div"
name="Categories_Table_Toolbar_Div"
role="directory"
>
{/* <MainTableToolBar> */}
<MTableToolbar {...props}
aria-label="Categories Table Toolbar"
id="Categories_Table_Toolbar"here is the rest:
components={{
Toolbar: props => (
<div
//style={{ display: 'flex', alignItems: 'center', }}
style={MTableToolbarStyle}
aria-label="Categories Table Toolbar Div"
id="Categories_Table_Toolbar_Div"
name="Categories_Table_Toolbar_Div"
role="directory"
>
{/* <MainTableToolBar> */}
<MTableToolbar {...props}
aria-label="Categories Table Toolbar"
id="Categories_Table_Toolbar"
name="Categories_Table_Toolbar"
role="toolbar"
/>
{/* </MainTableToolBar> */}
</div>
),
}}
onRowClick={((evt, selectedRow) => set_selected_row({ selectedRow }))}
options={{
sorting: true,
pageSizeOptions: [5, 10], // more then that look awefull...
searchFieldStyle: TableSearchFieldStyle,
headerStyle: TableHeaderStyle,
cellStyle: TableCellStyle,
rowStyle: rowData => ({
backgroundColor:
(
selected_row && selected_row.selectedRow
&& selected_row.selectedRow.tableData.id === rowData.tableData.id
) ? //'#EEE' : '#FFF'
// 'blue' : //'honeydew':// '#FFF'
`${main_palete_theme.palette.table_row_style.selected}` :
`${main_palete_theme.palette.table_row_style.regular}`, //'oldlace', //'#FFF',
height: TableRowStyle.height, //40,
textAlign: TableRowStyle.textAlign, //'left',
fontFamily: TableRowStyle.fontFamily, //'Expletus Sans',
fontSize: TableRowStyle.fontSize, //`3rem`,//'1.4rem',
}),
}} //options
icons={tableIcons}
localization={localization_theme.categories_table}
editable={{
onRowAdd: newData => addCategory(newData),
onRowUpdate: (newData, oldData) => editCategory(newData, oldData),
onRowDelete: oldData => removeCategory(oldData),
}}
/>
{/* MaterialTable */}
{/* </MuiThemeProvider> */}
</ContentBox>
</MainMenuContentWrapper>const TableStyle = {
margin: 'auto',
marginTop: 28,
marginBottom: 180, // for 5 and 10 rows and add row
padding: 'auto',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
overflow: 'auto',
//overflow: 'scroll',
//overflow: 'none',
width: 'auto',
minWidth: 'inherit',
height: '100%',
minHeight: 'inherit',
}
const MTableToolbarStyle = {
backgroundColor: ${main_palete_theme.palette.header.main},
// backgroundColor: '#01579b',
// backgroundColor: '#039be5',
color: ${main_palete_theme.palette.header.text_color}, //'#FFF',
fontSize: 1.2rem,
display: 'flex',
//flexDirection: 'column',
alignItems: 'space-around',
//justifyContent: 'center',
justifyContent: 'space-evenly',
flexWrap: 'wrap',
}
const TableTitleDivStyle = {
//visibility: 'visible',
display: 'flex',
//flexWrap: 'wrap',
flexBasis: '0%',
flexGrow: 1,
'@media all and (min-width: 320px)': {
display: 'flex',
flexBasis: '41%',
margin: 0,
marginRight: 10,
padding: 0,
paddingRight: 10,
flexGrow: 3,
},
}
const TableTitleStyled = styled('h4')({
color: ${main_palete_theme.palette.header.text_color},
"&:hover": {
color: ${main_palete_theme.palette.header.text_hoover_color},
},
fontSize: '1.2rem',
//visibility: 'hidden',
display: 'none',
//width: 0,
margin: 0,
padding: 0,
//width: '2rem','@media all and (mi