github
/
portainer
mirror of https://github.com/portainer/portainer
1
0
Fork 0
Code Issues Releases Wiki Activity

feat(ui/datatables): allow more global filters

refactor/EE-4337/service-task-datatable
Chaim Lev-Ari 2023-07-30 10:20:59 +02:00
parent bccab06abb
commit bb7c6077d5
1 changed files with 20 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
app/react/components/datatables/Datatable.tsx
View File

@ -48,9 +48,12 @@ export type PaginationProps =
onPageChange(page: number): void; onPageChange(page: number): void;
}; };
type DefaultGlobalFilter = { search: string };
export interface Props< export interface Props<
D extends DefaultType, D extends DefaultType,
TMeta extends TableMeta<D> = TableMeta<D> TMeta extends TableMeta<D> = TableMeta<D>,
TFilter extends DefaultGlobalFilter = DefaultGlobalFilter
> extends AutomationTestingProps { > extends AutomationTestingProps {
dataset: D[]; dataset: D[];
columns: TableOptions<D>['columns']; columns: TableOptions<D>['columns'];
@ -71,11 +74,13 @@ export interface Props<
getRowCanExpand?(row: Row<D>): boolean; getRowCanExpand?(row: Row<D>): boolean;
noWidget?: boolean; noWidget?: boolean;
meta?: TMeta; meta?: TMeta;
globalFilterFn?: typeof defaultGlobalFilterFn<D, TFilter>;
} }
export function Datatable< export function Datatable<
D extends DefaultType, D extends DefaultType,
TMeta extends TableMeta<D> = TableMeta<D> TMeta extends TableMeta<D> = TableMeta<D>,
TFilter extends DefaultGlobalFilter = DefaultGlobalFilter
>({ >({
columns, columns,
dataset, dataset,
@ -101,7 +106,8 @@ export function Datatable<
page, page,
totalCount = dataset.length, totalCount = dataset.length,
isServerSidePagination = false, isServerSidePagination = false,
}: Props<D, TMeta> & PaginationProps) { globalFilterFn = defaultGlobalFilterFn,
}: Props<D, TMeta, TFilter> & PaginationProps) {
const pageCount = useMemo( const pageCount = useMemo(
() => Math.ceil(totalCount / settings.pageSize), () => Math.ceil(totalCount / settings.pageSize),
[settings.pageSize, totalCount] [settings.pageSize, totalCount]
@ -126,7 +132,10 @@ export function Datatable<
pageIndex: page || 0, pageIndex: page || 0,
}, },
sorting: settings.sortBy ? [settings.sortBy] : [], sorting: settings.sortBy ? [settings.sortBy] : [],
globalFilter: settings.search, globalFilter: {
search: settings.search,
...initialTableState.globalFilter,
},
...initialTableState, ...initialTableState,
}, },
@ -201,9 +210,9 @@ export function Datatable<
</Table.Container> </Table.Container>
); );
function handleSearchBarChange(value: string) { function handleSearchBarChange(search: string) {
tableInstance.setGlobalFilter(value); tableInstance.setGlobalFilter({ search });
settings.setSearch(value); settings.setSearch(search);
} }
function handlePageChange(page: number) { function handlePageChange(page: number) {
@ -250,14 +259,14 @@ function getIsSelectionEnabled<D extends DefaultType>(
return true; return true;
} }
function globalFilterFn<D>( export function defaultGlobalFilterFn<D, TFilter extends { search: string }>(
row: Row<D>, row: Row<D>,
columnId: string, columnId: string,
filterValue: null | string filterValue: null | TFilter
): boolean { ): boolean {
const value = row.getValue(columnId); const value = row.getValue(columnId);
if (filterValue === null || filterValue === '') { if (filterValue === null || !filterValue.search) {
return true; return true;
} }
@ -265,7 +274,7 @@ function globalFilterFn<D>(
return false; return false;
} }
const filterValueLower = filterValue.toLowerCase(); const filterValueLower = filterValue.search.toLowerCase();
if ( if (
typeof value === 'string' || typeof value === 'string' ||