How to close Filter dialog in MUI datatable - reactjs

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 }}
/>

Related

Material UI Datagrid custom checkbox behavior

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.

ReactJS - ExportCSV

In ReactJS, I am using an ExportCSV button to download data into CSV format. How do I pop an alert to prevent the download of empty CSV when the bootstrap table is empty? Currently, when the selection does not retrieve any data, I am still able to download the file with empty contents. Let me know if there is a way to achieve this.
<ToolkitProvider
bootstrap4
keyField="TIMESTAMP,VALUE"
data={tData}
columns={columns}
className="mt-4 col-md-2 col-offset-4"
filter={filterFactory()}
exportCSV={{
fileName: "Details.csv",
onlyExportFiltered: true,
}}
>
{(props) => (
<React.Fragment>
<BootstrapTable
{...props.baseProps}
pagination={pagination}
filter={filterFactory()}
/>
<ExportCSVButton className="btn btn-success" {...props.csvProps}>
Export to CSV
</ExportCSVButton>
</React.Fragment>
)}
</ToolkitProvider>
Thanks

You can store the selection information in a state. If the state size is equivalent to 0, You can display an alert showing that the selection is empty and prevent the user from downloading the CSV.

Add Icon To Title Property of Material Table

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 />
</>}

Material UI -Data Grid Custom Pagination

I am trying to use the custom pagination from here
https://material-ui.com/components/data-grid/style/#custom-theme
however the pagination seems broken itself? Can anyone guide why the pagination is not working and what needs to be done, so that i can implement it?
When I click on page 2, and the click on Page 1, its not working.

I had to update the pagination to
<Pagination
color="primary"
showFirstButton
showLastButton
page={state.pagination.page + 1}
count={state.pagination.pageCount}
// #ts-expect-error
renderItem={props2 => <PaginationItem {...props2} disableRipple />}
onChange={(event, value) => apiRef.current.setPage(value-1)}
/>
)

How to add a custom Button in AntD pagination to download a report?

I want to add download button in pagination and I want to allow download table data as an excel file. Is it possible to add and render a custom button in Antd pagination. Here with I attached an image to show what I am going to archive.

You can use showTotal of Pagination props like below:
import { Pagination, Button } from "antd";
import DownloadOutlined from "#ant-design/icons/DownloadOutlined";
// render Pagination
<Pagination
total={25}
showSizeChanger
showTotal={(total) => (
<div>
{`Total ${total} items`}
<Button
type="primary"
icon={<DownloadOutlined />}
style={{ marginLeft: 8 }}
/>
</div>
)}
/>

Resources