feat: ClearFiltersButton improvements (#36)

* ClearFiltersButton horizontally sticky

* wip: horizontal scroll detected; width set correctly before scroll

* wip: width is set correctly during expansion (issue when scrolling past)

* wip: working properly for scrolling (issue: resize/other changes)

* App test setup

* simplify solution (removed manual calculations)

* Revert "App test setup"

This reverts commit b551716.

* Cleanup

Co-authored-by: Michael Förg <[email protected]>

src/components/clearFiltersButton.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { defaultClasses } from '../theme/defaultTheme/defaultClasses';
+import { useTableContext, useTheme } from '..';
+
+export default function ClearFiltersButton<T>() {
+  const Button = useTheme((t) => t.components.Button);
+  const textClearFilters = useTheme((t) => t.text.clearFilters);
+  const table = useTableContext<T>();
+
+  return (
+    <div css={defaultClasses.clearFiltersButton}>
+      <Button
+        variant="text"
+        onClick={() => {
+          table.update((state) => {
+            state.activeColumns.forEach((column) => {
+              state.filterValues.delete(column.id);
+            });
+          });
+        }}
+      >
+        {textClearFilters}
+      </Button>
+    </div>
+  );
+}

src/components/table.tsx

@@ -7,6 +7,7 @@ import { useTableState } from '../internalState/useTableState';
 import { defaultClasses } from '../theme/defaultTheme/defaultClasses';
 import { useCssVariables } from '../theme/useCssVariables';
 import { Id, InternalTableState, TableProps } from '../types';
+import ClearFiltersButton from './clearFiltersButton';
 import { ColumnFooter } from './columnFooter';
 import { ColumnHeader, ColumnHeaderContext } from './columnHeader';
 import { ColumnSelection } from './columnSelection';
@@ -91,8 +92,6 @@ const TableInner = memo(function TableInner<T>({ hidden }: { hidden: boolean })
   const cssVariables = useCssVariables();
 
   const enableClearFiltersButton = table.useState('props.enableClearFiltersButton');
-  const Button = useTheme((t) => t.components.Button);
-  const textClearFilters = useTheme((t) => t.text.clearFilters);
 
   useLayoutEffect(() => table.getState().props.debugRender?.('render table inner'));
 
@@ -148,22 +147,7 @@ const TableInner = memo(function TableInner<T>({ hidden }: { hidden: boolean })
       }
       footer={
         <>
-          {enableClearFiltersButton && hasActiveFilters && (
-            <div css={defaultClasses.clearFiltersButton}>
-              <Button
-                variant="text"
-                onClick={() => {
-                  table.update((state) => {
-                    state.activeColumns.forEach((column) => {
-                      state.filterValues.delete(column.id);
-                    });
-                  });
-                }}
-              >
-                {textClearFilters}
-              </Button>
-            </div>
-          )}
+          {enableClearFiltersButton && hasActiveFilters && <ClearFiltersButton />}
           {hasFooter && (
             <>
               <div

src/theme/defaultTheme/defaultClasses.ts

@@ -77,9 +77,12 @@ export const defaultClasses = {
   }),
 
   clearFiltersButton: css({
+    padding: `0 calc(2 * var(--spacing))`,
     fontWeight: 'bold',
-    textAlign: 'center',
-    gridColumn: '1/-1',
+    position: 'sticky',
+    left: 0,
+    maxWidth: 'fit-content',
+    gridColumn: '2/-1',
     button: {
       color: 'var(--primaryMain) !important',
       margin: 'var(--spacing)',