How can I remove the overlay loader completely from the table?
(Table used: https://github.com/mbrn/material-table)
You can use OverlayLoading field to remove the overlay loader style of material-table.
<MaterialTable
columns={columns}
data={...}
components={{
OverlayLoading: props => (<div></div>)
}}
/>
You can change loadingType to linear in options:
<MaterialTable
columns={columns}
data={...}
options={{
loadingType: 'linear'
}}
/>
You can override Overlay loading component like this,
<MaterialTable
columns={columns}
data={...}
components={{
OverlayLoading: () => <div />
}}
/>
Related
I'm using MUI V.5 with React.
And I would like to display an image in my grid, when rows are empty (when the user search for a product into the grid and can't find any result).
But I don't know how to access to this part sin filas (img reference)
enter image description here
{products ? (
<Box component="div" style={{ width: '100%' }}>
<DataGrid
rows={rows}
columns={columns}
checkboxSelection={true}
autoHeight
density="comfortable"
/>
</Box>
) : (
<div>Loading</div>
)}
</>
You can define a new component and override NoRowsOverlay component of MUI datagrid like this:
const MyCustomNoRowsOverlay = () => (
<img src="/no-items-found.jpg" alt="no-item" />
);
<DataGrid
components={{
NoRowsOverlay: MyCustomNoRowsOverlay
}}
You can take a look at this sandbox for a live working example of this solution.
I am using the MUI V5 DataGrid component in my App and I want to customize the Footer component on the datagrid component but can't find any docs on how to go about it. This is the current default footer:
I want to achieve something resembling this:
Is there a way to reorganize the individual components and customize the styling as such? Any help is highly appreciated.
this sample code you can use for a custom footer in data grid MUI v5
first, you write your pagination component with full logic when the client clicked on the page, like this :
const RoundedPagination = () => {
return (
<Stack spacing={2}>
<Pagination
shape="rounded" page={page + 1} onChange={handleChange} count={props.numberOfPages}
renderItem={(item) => (
<PaginationItem
sx={{
color: 'main.0',
}}
components={{previous: ArrowRightRoundedIcon, next: ArrowLeftRoundedIcon}}
{...item}
/>
)}
/>
</Stack>
)
}
then you use this component in data grid like this :
<Grid container item justifyContent={'center'} alignItems={'center'} md={12}>
<DataGrid
page={page}
rows={props.dataGridValue.ROW}
columns={props.dataGridValue.COLUMNS}
autoHeight
headerHeight={52}
rowsPerPageOptions={[10]}
disableColumnMenu
Pagination
hideFooterSelectedRowCount
components={{
Pagination: RoundedPagination,
}}
/>
</Grid>
hope you get your answer good luck ;)
I'm using MUI Datagrid and i wanna know if there is a way to customize the gridtoolbar with custom buttons and text.
Thanks.
Federico
I imagine that you know, thak to enable the toolbar you need to add the Toolbar: GridToolbar to the grid components prop - like
<DataGrid
{...data}
components={{
Toolbar: GridToolbar,
}}
/>
So, if you want to custom, and add others things, you must compose your own toolbar, for example:
function CustomToolbar() {
return (
<GridToolbarContainer>
<GridToolbarColumnsButton />
<GridToolbarFilterButton />
<GridToolbarDensitySelector />
<GridToolbarExport />
</GridToolbarContainer>
);
}
And do the same thing:
<DataGrid
{...data}
components={{
Toolbar: CustomToolbar,
}}
/>
Source: https://mui.com/x/react-data-grid/components/#toolbar
i use material-ui dataGrid and one of props loading={false/true} get true or false. I need same props but for error handling, but props error always true. How can i handle error ?
<DataGrid
className={classes.root}
components={{
LoadingOverlay: CustomLoadingOverlay,
NoRowsOverlay: CustomNoRowsOverlay,
ErrorOverlay: CustomErrorOverlay,
}}
loading={loading}
rows={data}
columns={columns}
pageSize={10}
/>
You aren't setting the error prop. All you need to do is add the error prop like below and you should be good. Granted, you still need to handle the actual error.
<DataGrid
className={classes.root}
components={{
LoadingOverlay: CustomLoadingOverlay,
NoRowsOverlay: CustomNoRowsOverlay,
ErrorOverlay: CustomErrorOverlay,
}}
loading={loading}
error={error} {/* Here */}
rows={data}
columns={columns}
pageSize={10}
/>
I am defining a custom toolbar in datagrid (Material-UI) following (see: https://material-ui.com/components/data-grid/rendering/#toolbar)
I started from this example: https://codesandbox.io/s/x58yv?file=/demo.js
I want to show or hide toolbar with transition.
As we can't passing custom props to component:
<DataGrid
...
components={{ Toolbar: CustomToolbar }}
...
</DataGrid>
So i have used context API like this:
export function CustomToolbar(props: GridBaseComponentProps) {
const classes = useToolbarStyles();
const toolbarContext = useContext(ToolbarContext);
return (
<Collapse in={toolbarContext.toolbar}>
<GridToolbarContainer className={classes.root}>
<GridColumnsToolbarButton />
<GridFilterToolbarButton />
<GridDensitySelector />
<GridToolbarExport />
</GridToolbarContainer>
</Collapse>
);
}
It works but is it any better solution ?
You should be able to use the componentsProps prop of DataGrid to pass in any additional props (see https://material-ui.com/api/data-grid/), ex.
<DataGrid
...
components={{ Toolbar: CustomToolbar }}
componentsProps={{ toolbar: { myCustomProp: 8 } }}
...
</DataGrid>