Is there a way to create clear all filters button?

[ashatat]

Hi, I need a button to clear all column filters at once, I can manage the columnFilters state and clear it when clicking on the button.
what I am struggling with is that I want to add the button as an Icon next to show/hide filters
Any suggestions please 🙏?

[KevinVandy]

There is a table instance resetColumnFilters api

Combine that knowledge with the custom internal toolbar buttons example

[ashatat]

hi @KevinVandy thanks for replying
I am struggling to find any doc on how to use resetColumnFilters?? should I just pass a boolean for it to work? or is it a function?

been trying to make it work with no luck

[ashatat]

For anyone in the future looking for this.
This is a workaround to make this work, (it's a shame that I couldn't use resetColumnFilters since no documentation to show how it suppose to work)

function CustomTable({ data, columns, isLoading, state, ...rest }) {
	const [columnFilters, setColumnFilters] = useState([]);
	const [showColumnFilters, setShowColumnFilters] = useState(false);

	return (
		<MaterialReactTable
			columns={columns}
			data={data}
			state={{ isLoading, columnFilters, showColumnFilters, ...state }}
			onColumnFiltersChange={setColumnFilters}
			onShowColumnFiltersChange={() => setShowColumnFilters(v => !v)}
			//customize built-in buttons in the top-right of top toolbar
			renderToolbarInternalActions={({ table }) => (
				<Box>
					{!!columnFilters.length && (
						<Tooltip title="Reset filters" arrow>
							<IconButton
								onClick={() => {
									setShowColumnFilters(false);
									setColumnFilters([]);
								}}
							>
								<FilterAltOffOutlinedIcon />
							</IconButton>
						</Tooltip>
					)}
					{/* Built-in buttons*/}
					<MrtToggleFiltersButton table={table} />
					<MrtShowHideColumnsButton table={table} />
					<MrtToggleDensePaddingButton table={table} />
					<MrtFullScreenToggleButton table={table} />
				</Box>
			)}
			{...rest}
		/>
	);
}

[joey-kwl]

You can use resetColumnFilters by calling table.resetColumnFilters()