I have a datagrid table with checkboxSelection enabled. This means, the checkbox is always visible, whenever the data is available or not.
I am trying to render a spinner while the data is being fetch, and afterwards the checkbox itself. So I tried:
<Table
loading={loading}
pagination
checkboxSelection
isRowSelectable={isRowSelectable as SclTableProps['isRowSelectable']}
columns={columns as SclTableProps['columns']}
rows={rows}
selectionModel={selectionModel}
components={{
BaseCheckbox: (a) => loading ? <>loading...</> : (
<Checkbox checked={a.checked} /> // <-- this is imported from '#material-ui'
),
}}
/>
Although, visual-wise it worked, the checkbox lost it's functionality.
So, I tried to rebuild the selection
BaseCheckbox: (a) => loading ? <>loading...</> : (
<Checkbox
onClick={(params) => {
//do something
}}
checked={a.checked}
/>
),
But I am not able to identify which row in the table I clicked (via row id for example).
So how should I proceed to either have the default features and selections or at least be able to grab the row data that is being selected.
Related
This code is regarding Material UI Datagrid
I need to disable the Go to next page button while loading the API
<DataGrid
autoHeight
getRowHeight={getRowHeight}
rows={rows}
columns={columns}
page={page - 1}
rowCount={total}
rowsPerPageOptions={rowsPerPage}
pagination
paginationMode='server'
pageSize={pageSize}
getRowClassName={(params) => getRowClassName(params)}
onPageChange={(newPage) => handelPageChange(newPage)}
loading={isLoading}
// disableNextPage={isLoading}
onPageSizeChange={(newPageSize) =>
setAssetList((prveState) => ({
...prveState,
pageSize: newPageSize,
}))
}
/>
I have used this prop it has been resolved
hideFooterPagination={isLoading}
I am new to using material-table. I am simply trying to add an icon to the end of the title on the material-table title property, but it is not as simple as I thought. Is it even possible? My code snippet is below...
<MaterialTable
columns={columns}
data={data}
title={`Summary View ${(
<BsInfoSquare onClick={() => setIsOpen(true)} />
)}`}
The type definitions at https://github.com/mbrn/material-table/blob/master/types/index.d.ts show that title is a string or a ReactElement, so you should be able to do something like this:
<MaterialTable
columns={columns}
data={data}
title={<>
Summary view
<MyIcon />
</>}
NoRowsOverlay is not working once you apply the filter and as a result there is/are no rows to display.
Here is my code:
function customNoRowsOverlay() {
return (
<GridOverlay>
<div>No Rows</div>
</GridOverlay>
)
}
components={{ NoRowsOverlay: customNoRowsOverlay }}
I need to display 'No Rows' Message if there is/are no rows to display after applying filter. However the above code works if you have rows={[]}
Use the NoRowsOverlay slot name if you're using version #v4.0.0-alpha.18 or above.
If you want to display an overlay when there is no rows in DataGrid, you can override NoRowsOverlay or NoResultsOverlay slot depending on your usecase:
NoRowsOverlay: Display when there is no row passed to the DataGrid (rows={[]}).
NoResultsOverlay: Display when there is row data in the DataGrid, but the local filter returns no result.
<DataGrid
{...}
components={{
NoRowsOverlay: () => (
<Stack height="100%" alignItems="center" justifyContent="center">
No rows in DataGrid
</Stack>
),
NoResultsOverlay: () => (
<Stack height="100%" alignItems="center" justifyContent="center">
Local filter returns no result
</Stack>
)
}}
/>
Live Demo
There is a separate slot for that: NoResultsOverlay.
When NoRowsOverlay is not a top-level property, you can add a custom message like in the example below. For docs, see https://mui.com/x/react-data-grid/components/#no-rows-overlay
<DataGrid
rows={rows}
columns={columns}
components={{
noRowsOverlay: CustomNoRowsOverlay,
}}
/>
I am working on a React project and currently using Material Ui Data Grid for the data display.
What I want is in the table I decide whether I want the checkbox at the starting of each row or a Radio button.
Of Course the feature changes as with the radio button I can select only one data and with check box, I can select multiple data.
I can't seem to find how to do this.
Thank you for the help.
This can be achieved using OnSelectionModelChange props of material-ui datagrid and Radio button.
Live Demo
You can use the renderCell method in column object. You can render what you want like this:
{
field: 'bypass_group_id',
headerName: ' ',
width: 40,
renderCell: (cellValues) => {
return (
<Radio
checked={cellValues.id === this.state.form.selectedGroup}
onChange={this.handleChangeRadio.bind(this,cellValues.id)}
value={cellValues.id}
name="radio-buttons"
inputProps={{ 'aria-label': {cellValues} }}
/>
)
}
}
I tried the same the other day. The only way it worked for me was to use "Data table" as opposed to "datagrid". The reason is that data table's code is much more simplified and can be fiddled with.
Are your data hard-coded or shown dynamically?
I added an empty TableCell line under TableRow in my TableHead section (to basically create an empty column for the radio buttons, without a column name):
<TableHead>
<TableRow>
<TableCell></TableCell>
<TableCell>Name</TableCell>
<TableCell>Age</TableCell>
</TableHead>
</TableRow>
Then in my rows section, I added a Radio component:
<TableBody>
<TableRow>
<TableCell>
<Radio
value={value}
checked={whatever}
onChange={handleRadiochange}
size="small"
/>
</TableCell>
<TableCell id="name"> John Smith </TableCell>
<TableCell id="age"> 49 </TableCell>
Because my rows are generated dyamically, the button was generated with each row. You can give it a unique {value} based on the row data (I simply chose the unique value in the row from the data I got e.g. {rowsdata.ID} or {rowsdata.SSN).
Data Table is versatile and can be modified to look like Datagrid. For example, I added AppBar (to highlight the selected row value), pagination, table-footer and hover effect.
The only thing I didn't look into was to select the the row (and the radio button) after a click (which is what happens in datagrid). This is redundant in my opinion as the end-user can as well click on the radio button and achieve the same effect.
I am using MUI datatable in my react project. I used serverside filtering and customFilterDialogFooter where I include following code in options which is passed in mui-datatables. When I click on Apply Filters button, I fetched data from server using my filtering criteria which is completely fine but Filter window is not closed. Is there any way to close filter window?
customFilterDialogFooter: filterList => {
return (
<div style={{marginTop: '40px'}}>
<Button variant="contained" onClick={() => {
handleFilterSubmit(filterList)
}}>Apply Filters</Button>
</div>
);
}
Filter dialog is closed on the version mui-datatables": "3.0.0"
<MUIDataTable
data={data}
columns={COLUMNS}
options={{ viewColumns: false }}
/>