[ENHANCEMENT] Add support for sub-rows, fuzzy filtering and column filtering

components/package.json

@@ -36,6 +36,7 @@
     "@mui/x-date-pickers": "^7.23.1",
     "@perses-dev/core": "0.53.0",
     "@perses-dev/spec": "0.2.0-beta.0",
+    "@tanstack/match-sorter-utils": "^8.19.4",
     "@tanstack/react-table": "^8.20.5",
     "@uiw/react-codemirror": "^4.19.1",
     "date-fns": "^4.1.0",

components/src/Table/Table.tsx

@@ -14,20 +14,23 @@
 import { Stack, useTheme } from '@mui/material';
 import {
   ColumnDef,
+  getCoreRowModel,
+  getExpandedRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
   OnChangeFn,
   Row,
   RowSelectionState,
   SortingState,
   Table as TanstackTable,
-  getCoreRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
   useReactTable,
+  VisibilityState,
 } from '@tanstack/react-table';
-import { ReactElement, useCallback, useMemo } from 'react';
+import { ReactElement, useCallback, useMemo, useState } from 'react';
+import { useFuzzySearch } from './hooks/useFuzzySearch';
 import { TableCheckbox } from './TableCheckbox';
 import { VirtualizedTable } from './VirtualizedTable';
-import { DEFAULT_COLUMN_WIDTH, TableProps, persesColumnsToTanstackColumns } from './model/table-model';
+import { DEFAULT_COLUMN_WIDTH, persesColumnsToTanstackColumns, TableProps } from './model/table-model';
 
 const DEFAULT_GET_ROW_ID = (data: unknown, index: number): string => {
   return `${index}`;
@@ -64,10 +67,20 @@ export function Table<TableData>({
   pagination,
   onPaginationChange,
   rowSelectionVariant = 'standard',
+  getSubRows,
+  showSearch,
+  showColumnFilter,
+  hiddenColumns,
   ...otherProps
 }: TableProps<TableData>): ReactElement {
   const theme = useTheme();
 
+  const { globalFilter, setGlobalFilter, fuzzySearchOptions } = useFuzzySearch<TableData>(showSearch);
+
+  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>(
+    hiddenColumns?.reduce((acc, columnId) => ({ ...acc, [columnId]: false }), {}) ?? {}
+  );
+
   const handleRowSelectionChange: OnChangeFn<RowSelectionState> = (rowSelectionUpdater) => {
     const newRowSelection =
       typeof rowSelectionUpdater === 'function' ? rowSelectionUpdater(rowSelection) : rowSelectionUpdater;
@@ -177,7 +190,7 @@ export function Table<TableData>({
   const table = useReactTable({
     data,
     columns: tableColumns,
-    getRowId,
+    getRowId: getRowId,
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),
     getPaginationRowModel: pagination ? getPaginationRowModel() : undefined,
@@ -187,12 +200,18 @@ export function Table<TableData>({
     enableRowSelection: !!checkboxSelection,
     onRowSelectionChange: handleRowSelectionChange,
     onSortingChange: handleSortingChange,
+    onColumnVisibilityChange: setColumnVisibility,
+    getSubRows: getSubRows,
+    getExpandedRowModel: getSubRows ? getExpandedRowModel() : undefined,
+    ...fuzzySearchOptions,
     // For now, defaulting to sort by descending first. We can expose the ability
     // to customize it if/when we have use cases for it.
     sortDescFirst: true,
     state: {
       rowSelection,
       sorting,
+      globalFilter: showSearch ? globalFilter : undefined,
+      columnVisibility,
       ...(pagination ? { pagination } : {}),
     },
   });
@@ -214,12 +233,17 @@ export function Table<TableData>({
       defaultColumnHeight={defaultColumnHeight}
       onRowClick={handleRowClick}
       rows={table.getRowModel().rows}
-      columns={table.getAllFlatColumns()}
+      columns={table.getVisibleFlatColumns()}
       headers={table.getHeaderGroups()}
       cellConfigs={cellConfigs}
       pagination={pagination}
       onPaginationChange={onPaginationChange}
       rowCount={table.getRowCount()}
+      showSearch={showSearch}
+      showColumnFilter={showColumnFilter}
+      globalFilter={globalFilter}
+      onGlobalFilterChange={setGlobalFilter}
+      allColumns={table.getAllColumns()}
     />
   );
 }

components/src/Table/TableToolbar.test.tsx

@@ -0,0 +1,82 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ReactElement, useState } from 'react';
+import { TableToolbar, TableToolbarProps } from './TableToolbar';
+
+function TableToolbarWrapper(props: Partial<TableToolbarProps<unknown>> = {}): ReactElement {
+  const [globalFilter, setGlobalFilter] = useState('');
+
+  return (
+    <TableToolbar
+      showSearch
+      globalFilter={globalFilter}
+      onGlobalFilterChange={setGlobalFilter}
+      columns={[]}
+      width={600}
+      {...props}
+    />
+  );
+}
+
+function getSearchInput(): HTMLInputElement {
+  return screen.getByRole('textbox', { name: 'search table' });
+}
+
+async function getClearSearchButton(): Promise<HTMLElement> {
+  return waitFor(() => screen.getByRole('button'));
+}
+
+describe('TableToolbar', () => {
+  describe('search clear button', () => {
+    test('clicking the close button clears the input value', async () => {
+      render(<TableToolbarWrapper />);
+
+      const input = getSearchInput();
+
+      userEvent.type(input, 'hello');
+      expect(input).toHaveValue('hello');
+
+      userEvent.click(await getClearSearchButton());
+
+      const resetInput = getSearchInput();
+      expect(resetInput).toHaveValue('');
+    });
+
+    test('close button is not visible when search input is empty', () => {
+      render(<TableToolbarWrapper />);
+
+      expect(screen.queryByRole('button')).not.toBeInTheDocument();
+    });
+
+    test('input value is empty after typing, clearing, and re-checking', async () => {
+      render(<TableToolbarWrapper />);
+
+      const input = getSearchInput();
+
+      userEvent.type(input, 'first');
+      expect(input).toHaveValue('first');
+
+      userEvent.click(await getClearSearchButton());
+      expect(getSearchInput()).toHaveValue('');
+
+      userEvent.type(getSearchInput(), 'second');
+      expect(getSearchInput()).toHaveValue('second');
+
+      userEvent.click(await getClearSearchButton());
+      expect(getSearchInput()).toHaveValue('');
+    });
+  });
+});

components/src/Table/TableToolbar.tsx

@@ -0,0 +1,154 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { Checkbox, IconButton, InputAdornment, ListItemText, Menu, MenuItem, Stack } from '@mui/material';
+import { Column } from '@tanstack/react-table';
+import { ReactElement, useCallback, useState } from 'react';
+import Magnify from 'mdi-material-ui/Magnify';
+import Close from 'mdi-material-ui/Close';
+import ViewColumn from 'mdi-material-ui/ViewColumn';
+import { TextField } from '../controls';
+
+export interface TableToolbarProps<TableData> {
+  /**
+   * When `true`, a search input is rendered.
+   */
+  showSearch?: boolean;
+
+  /**
+   * Current value of the global filter / search query.
+   */
+  globalFilter: string;
+
+  /**
+   * Callback fired when the search query changes.
+   */
+  onGlobalFilterChange: (value: string) => void;
+
+  /**
+   * When `true`, a "Columns" button is rendered that opens a column visibility dropdown.
+   */
+  showColumnFilter?: boolean;
+
+  /**
+   * All columns from the table instance, used to build the visibility menu.
+   */
+  columns: Array<Column<TableData>>;
+  /**
+   * The width of the toolbar, used to determine when to switch to a more compact layout.
+   */
+  width: number | string;
+}
+
+export function TableToolbar<TableData>({
+  showSearch,
+  globalFilter,
+  onGlobalFilterChange,
+  showColumnFilter,
+  columns,
+  width,
+}: TableToolbarProps<TableData>): ReactElement | null {
+  const [colMenuAnchor, setColMenuAnchor] = useState<null | HTMLElement>(null);
+  const colMenuOpen = Boolean(colMenuAnchor);
+  const [searchResetKey, setSearchResetKey] = useState(0);
+
+  const handleSearchClear = useCallback(() => {
+    onGlobalFilterChange('');
+    setSearchResetKey((prev) => prev + 1);
+  }, [onGlobalFilterChange]);
+
+  if (!showSearch && !showColumnFilter) {
+    return null;
+  }
+
+  return (
+    <Stack
+      direction="row"
+      gap={1}
+      alignItems="center"
+      justifyContent="flex-end"
+      width={width}
+      padding="0.5rem"
+      sx={{ backgroundColor: (theme) => theme.palette.background.default }}
+    >
+      {showSearch && (
+        <TextField
+          key={searchResetKey}
+          placeholder="Search…"
+          value={globalFilter}
+          onChange={onGlobalFilterChange}
+          variant="standard"
+          slotProps={{
+            htmlInput: { 'aria-label': 'search table' },
+            input: {
+              startAdornment: (
+                <InputAdornment position="start">
+                  <Magnify fontSize="small" />
+                </InputAdornment>
+              ),
+              endAdornment: globalFilter !== '' && (
+                <InputAdornment position="end">
+                  <IconButton onClick={handleSearchClear}>
+                    <Close fontSize="small" />
+                  </IconButton>
+                </InputAdornment>
+              ),
+            },
+          }}
+          sx={{ flexGrow: 1 }}
+        />
+      )}
+      {showColumnFilter && (
+        <>
+          <IconButton
+            onClick={(e) => setColMenuAnchor(e.currentTarget)}
+            aria-haspopup="listbox"
+            aria-expanded={colMenuOpen}
+            color="info"
+          >
+            <ViewColumn />
+          </IconButton>
+          <Menu
+            anchorEl={colMenuAnchor}
+            open={colMenuOpen}
+            onClose={() => setColMenuAnchor(null)}
+            slotProps={{ list: { dense: true } }}
+            sx={{ maxHeight: 400 }}
+          >
+            {columns.map((column) => {
+              const header = column.columnDef.header;
+              const label = typeof header === 'string' ? header : column.id;
+              return (
+                <MenuItem
+                  key={column.id}
+                  disabled={!column.getCanHide()}
+                  onClick={column.getCanHide() ? column.getToggleVisibilityHandler() : undefined}
+                  dense
+                >
+                  <Checkbox
+                    checked={column.getIsVisible()}
+                    disabled={!column.getCanHide()}
+                    size="small"
+                    disableRipple
+                    sx={{ p: 0, mr: 1 }}
+                  />
+                  <ListItemText primary={label} />
+                </MenuItem>
+              );
+            })}
+          </Menu>
+        </>
+      )}
+    </Stack>
+  );
+}