schummar-table 0.8.1 → 0.9.0

package/dist/cjs/index.js

@@ -401,7 +401,7 @@ const noopParentId = () => void 0;
 function calcProps(props) {
   const cache = useTableMemo();
   return react.useMemo(() => {
-    var _f, _g, _h, _i, _j, _k, _l;
+    var _f, _g, _h, _i, _j, _k, _l, _m;
     let id;
     if (props.id instanceof Function || Array.isArray(props.id)) {
       id = cache("id", props.id);
@@ -480,8 +480,9 @@ function calcProps(props) {
       stickyFooter: (_i = props.stickyFooter) != null ? _i : true,
       enableExport,
       enableColumnSelection: (_j = props.enableColumnSelection) != null ? _j : true,
-      enableColumnResize: (_k = props.enableColumnResize) != null ? _k : true,
-      enableColumnReorder: (_l = props.enableColumnReorder) != null ? _l : true
+      enableClearFiltersButton: (_k = props.enableClearFiltersButton) != null ? _k : false,
+      enableColumnResize: (_l = props.enableColumnResize) != null ? _l : true,
+      enableColumnReorder: (_m = props.enableColumnReorder) != null ? _m : true
     });
   }, [props]);
 }
@@ -637,7 +638,7 @@ function ColumnFooter() {
     const column = state.activeColumns.find((column2) => column2.id === columnId);
     if ((column == null ? void 0 : column.footer) instanceof Function) {
       const items = state.activeItems;
-      const values = items.map((item) => column == null ? void 0 : column.value(item));
+      const values = items.map((item) => column == null ? void 0 : column.value(item.value));
       return column == null ? void 0 : column.footer(values, items);
     }
     return column == null ? void 0 : column.footer;
@@ -1635,6 +1636,13 @@ const TableInner = react.memo(function TableInner2({
     width: column.width,
     classes: column.classes
   })));
+  const hasActiveFilters = table.useState((state) => {
+    return state.activeColumns.some((column) => {
+      const filter = state.filters.get(column.id);
+      const filterValue = state.filterValues.get(column.id);
+      return filter !== void 0 && filterValue !== void 0 && filter.isActive(filterValue);
+    });
+  });
   const columnWidths = table.useState("columnWidths", {
     throttle: 16
   });
@@ -1646,6 +1654,9 @@ const TableInner = react.memo(function TableInner2({
   const enableColumnSelection = table.useState("props.enableColumnSelection");
   const enableExport = table.useState((state) => !!state.props.enableExport.copy || !!state.props.enableExport.download);
   const cssVariables = useCssVariables();
+  const enableClearFiltersButton = table.useState("props.enableClearFiltersButton");
+  const Button2 = useTheme((t) => t.components.Button);
+  const textClearFilters = useTheme((t) => t.text.clearFilters);
   react.useLayoutEffect(() => {
     var _a, _b;
     return (_b = (_a = table.getState().props).debugRender) == null ? void 0 : _b.call(_a, "render table inner");
@@ -1683,19 +1694,34 @@ const TableInner = react.memo(function TableInner2({
         css: [tableTheme.defaultClasses.headerFill, stickyHeader && tableTheme.defaultClasses.sticky, stickyHeader instanceof Object && stickyHeader]
       })]
     }),
-    footer: hasFooter && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
-        className: classes == null ? void 0 : classes.footerCell,
-        css: [tableTheme.defaultClasses.footerFill, stickyFooter && tableTheme.defaultClasses.stickyBottom, stickyFooter instanceof Object && stickyFooter]
-      }), /* @__PURE__ */ jsxRuntime.jsx("div", {
-        className: classes == null ? void 0 : classes.footerCell,
-        css: [tableTheme.defaultClasses.footerFill, stickyFooter && tableTheme.defaultClasses.stickyBottom, stickyFooter instanceof Object && stickyFooter]
-      }), activeColumns.map((column) => /* @__PURE__ */ jsxRuntime.jsx(ColumnContext.Provider, {
-        value: column.id,
-        children: /* @__PURE__ */ jsxRuntime.jsx(ColumnFooter, {})
-      }, column.id)), /* @__PURE__ */ jsxRuntime.jsx("div", {
-        className: classes == null ? void 0 : classes.footerCell,
-        css: [tableTheme.defaultClasses.footerFill, stickyFooter && tableTheme.defaultClasses.stickyBottom, stickyFooter instanceof Object && stickyFooter]
+    footer: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [enableClearFiltersButton && hasActiveFilters && /* @__PURE__ */ jsxRuntime.jsx("div", {
+        css: tableTheme.defaultClasses.clearFiltersButton,
+        children: /* @__PURE__ */ jsxRuntime.jsx(Button2, {
+          variant: "text",
+          onClick: () => {
+            table.update((state) => {
+              state.activeColumns.forEach((column) => {
+                state.filterValues.delete(column.id);
+              });
+            });
+          },
+          children: textClearFilters
+        })
+      }), hasFooter && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
+          className: classes == null ? void 0 : classes.footerCell,
+          css: [tableTheme.defaultClasses.footerFill, stickyFooter && tableTheme.defaultClasses.stickyBottom, stickyFooter instanceof Object && stickyFooter]
+        }), /* @__PURE__ */ jsxRuntime.jsx("div", {
+          className: classes == null ? void 0 : classes.footerCell,
+          css: [tableTheme.defaultClasses.footerFill, stickyFooter && tableTheme.defaultClasses.stickyBottom, stickyFooter instanceof Object && stickyFooter]
+        }), activeColumns.map((column) => /* @__PURE__ */ jsxRuntime.jsx(ColumnContext.Provider, {
+          value: column.id,
+          children: /* @__PURE__ */ jsxRuntime.jsx(ColumnFooter, {})
+        }, column.id)), /* @__PURE__ */ jsxRuntime.jsx("div", {
+          className: classes == null ? void 0 : classes.footerCell,
+          css: [tableTheme.defaultClasses.footerFill, stickyFooter && tableTheme.defaultClasses.stickyBottom, stickyFooter instanceof Object && stickyFooter]
+        })]
       })]
     }),
     children: (itemIds, startIndex) => itemIds.map((itemId, index) => /* @__PURE__ */ jsxRuntime.jsx(Row, {
@@ -2127,6 +2153,7 @@ const defaultTexts = {
   exportDownload: "Download",
   today: "Today",
   thisWeek: "This week",
+  clearFilters: "Clear all filters",
   reset: "Reset",
   loading: "Loading",
   selected: (count) => `${count} selected`
@@ -2343,6 +2370,7 @@ function DatePicker({
   const textToday = useTheme((t) => t.text.today);
   const textThisWeek = useTheme((t) => t.text.thisWeek);
   const textReset = useTheme((t) => t.text.reset);
+  const cssVariables = useCssVariables();
   const [baseDate] = react.useState(new Date());
   const [dateInView, setDateInView] = react.useState(baseDate);
   const [dirty, setDirty] = react.useState();
@@ -2420,6 +2448,7 @@ function DatePicker({
     return (year) => format(new Date(year, 0, 1));
   }, [locale]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+    css: cssVariables,
     children: [/* @__PURE__ */ jsxRuntime.jsxs("div", {
       css: {
         display: "grid",