Quick action for resetting all datatable filters

Summary:
As we persist column filters between sessions - sometimes it's not obvious that they are applied.

This diff adds "Reset filters" action just near message "No records match the current search / filter criteria" to make it obvious that some records are hidden because of filters and let user quickly disable filters to see all items.

The same action also added to datatable's context menu.

Changelog:
Quick action "Reset filters" for datatable-based plugins which is shown in context menu and in empty table when all items filtered out.

Reviewed By: timur-valiev

Differential Revision: D36600535

fbshipit-source-id: 782e7f863f2f52d7f6017685bdebcb1feeb97dbd
This commit is contained in:
Anton Nikolaev
2022-05-24 04:51:19 -07:00
committed by Facebook GitHub Bot
parent 02058a14d0
commit 8d07b7b644
3 changed files with 44 additions and 7 deletions

View File

@@ -51,6 +51,8 @@ type Action<Name extends string, Args = {}> = {type: Name} & Args;
type DataManagerActions<T> =
/** Reset the current table preferences, including column widths an visibility, back to the default */
| Action<'reset'>
/** Disable the current column filters */
| Action<'resetFilters'>
/** Resizes the column with the given key to the given width */
| Action<'resizeColumn', {column: keyof T; width: number | Percentage}>
/** Sort by the given column. This toggles statefully between ascending, descending, none (insertion order of the data source) */
@@ -142,6 +144,13 @@ export const dataTableManagerReducer = produce<
draft.selection = castDraft(emptySelection);
break;
}
case 'resetFilters': {
draft.columns.forEach((c) =>
c.filters?.forEach((f) => (f.enabled = false)),
);
draft.searchValue = '';
break;
}
case 'resizeColumn': {
const {column, width} = action;
const col = draft.columns.find((c) => c.key === column)!;
@@ -288,6 +297,7 @@ export const dataTableManagerReducer = produce<
*/
export type DataTableManager<T> = {
reset(): void;
resetFilters(): void;
selectItem(
index: number | ((currentSelection: number) => number),
addToSelection?: boolean,
@@ -319,6 +329,9 @@ export function createDataTableManager<T>(
reset() {
dispatch({type: 'reset'});
},
resetFilters() {
dispatch({type: 'resetFilters'});
},
selectItem(index: number, addToSelection = false, allowUnselect = false) {
dispatch({
type: 'selectItem',