schummar-table 1.0.0 → 1.0.1

package/dist/index.js

@@ -1602,6 +1602,70 @@ function FilterPopover({ anchor, onClose, column, children }) {
 	});
 }
 //#endregion
+//#region src/components/hiddenColumnFilters.tsx
+/** Lets users edit the filters of columns that are not visible, see `enableHiddenColumnFilters`. */
+function HiddenColumnFilters() {
+	const { props, visibleColumns, filterValues, actions } = useTableStructure();
+	const IconButton = useTheme((t) => t.components.IconButton);
+	const Button = useTheme((t) => t.components.Button);
+	const FilterList = useTheme((t) => t.icons.FilterList);
+	const title = useTheme((t) => t.text.hiddenColumnFilters);
+	const [anchor, setAnchor] = useState(null);
+	const [selected, setSelected] = useState();
+	const columns = props.columns.filter((column) => column.filter && !visibleColumns.some((visible) => visible.id === column.id));
+	if (columns.length === 0) return null;
+	const isActive = (columnId) => isActiveFilter(columns.find((column) => column.id === columnId)?.filter, filterValues.get(columnId));
+	const anyActive = columns.some((column) => isActive(column.id));
+	const selectedColumn = columns.find((column) => column.id === selected);
+	function close() {
+		setAnchor(null);
+		setSelected(void 0);
+	}
+	const color = (active) => active ? "var(--primaryMain)" : "#b0bac9";
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(IconButton, {
+		onClick: (event) => setAnchor(event.currentTarget),
+		css: { color: color(anyActive) },
+		children: /* @__PURE__ */ jsx(FilterList, {})
+	}), anchor && /* @__PURE__ */ jsx(FilterPopover, {
+		anchor,
+		onClose: close,
+		column: selectedColumn,
+		children: selectedColumn ? /* @__PURE__ */ jsxs("div", {
+			css: { display: "grid" },
+			children: [/* @__PURE__ */ jsxs(Button, {
+				onClick: () => setSelected(void 0),
+				css: {
+					justifyContent: "flex-start",
+					color: "inherit"
+				},
+				children: ["‹ ", selectedColumn.header]
+			}), /* @__PURE__ */ jsx(FilterPanel, {
+				column: selectedColumn,
+				close
+			}, selectedColumn.id)]
+		}) : /* @__PURE__ */ jsxs("div", {
+			css: {
+				padding: "calc(var(--spacing) * 2)",
+				display: "grid",
+				gap: "var(--spacing)"
+			},
+			children: [/* @__PURE__ */ jsx("div", { children: title }), columns.map((column) => /* @__PURE__ */ jsx(Button, {
+				onClick: () => setSelected(column.id),
+				onContextMenu: (event) => {
+					actions.setFilterValue(column.id, void 0);
+					event.preventDefault();
+				},
+				startIcon: /* @__PURE__ */ jsx(FilterList, { css: { color: color(isActive(column.id)) } }),
+				css: {
+					justifyContent: "flex-start",
+					color: isActive(column.id) ? "var(--primaryMain)" : "inherit"
+				},
+				children: column.header
+			}, column.id))]
+		})
+	})] });
+}
+//#endregion
 //#region src/components/sortComponent.tsx
 function SortComponent({ children }) {
 	const { sort, activeColumns, props, actions } = useTableStructure();
@@ -1661,7 +1725,7 @@ function SortComponent({ children }) {
 //#region src/components/columnHeader.tsx
 function ColumnHeader() {
 	const columnId = useColumnContext();
-	const { activeColumns } = useTableStructure();
+	const { props, activeColumns, visibleColumns } = useTableStructure();
 	const column = activeColumns.find((column) => column.id === columnId);
 	const { classes, styles } = useTheme((theme) => columnTheme(theme, column));
 	return /* @__PURE__ */ jsxs("div", {
@@ -1679,6 +1743,7 @@ function ColumnHeader() {
 			/* @__PURE__ */ jsx(SortComponent, { children: column?.header }),
 			/* @__PURE__ */ jsx("div", { css: { flex: 1 } }),
 			/* @__PURE__ */ jsx(FilterControl, {}),
+			props.enableHiddenColumnFilters && visibleColumns[visibleColumns.length - 1]?.id === columnId && /* @__PURE__ */ jsx(HiddenColumnFilters, {}),
 			/* @__PURE__ */ jsx(ResizeHandle, {})
 		]
 	});
@@ -1853,70 +1918,6 @@ function Export() {
 	})] });
 }
 //#endregion
-//#region src/components/hiddenColumnFilters.tsx
-/** Lets users edit the filters of columns that are not visible, see `enableHiddenColumnFilters`. */
-function HiddenColumnFilters() {
-	const { props, visibleColumns, filterValues, actions } = useTableStructure();
-	const IconButton = useTheme((t) => t.components.IconButton);
-	const Button = useTheme((t) => t.components.Button);
-	const FilterList = useTheme((t) => t.icons.FilterList);
-	const title = useTheme((t) => t.text.hiddenColumnFilters);
-	const [anchor, setAnchor] = useState(null);
-	const [selected, setSelected] = useState();
-	const columns = props.columns.filter((column) => column.filter && !visibleColumns.some((visible) => visible.id === column.id));
-	if (columns.length === 0) return null;
-	const isActive = (columnId) => isActiveFilter(columns.find((column) => column.id === columnId)?.filter, filterValues.get(columnId));
-	const anyActive = columns.some((column) => isActive(column.id));
-	const selectedColumn = columns.find((column) => column.id === selected);
-	function close() {
-		setAnchor(null);
-		setSelected(void 0);
-	}
-	const color = (active) => active ? "var(--primaryMain)" : "#b0bac9";
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(IconButton, {
-		onClick: (event) => setAnchor(event.currentTarget),
-		css: { color: color(anyActive) },
-		children: /* @__PURE__ */ jsx(FilterList, {})
-	}), anchor && /* @__PURE__ */ jsx(FilterPopover, {
-		anchor,
-		onClose: close,
-		column: selectedColumn,
-		children: selectedColumn ? /* @__PURE__ */ jsxs("div", {
-			css: { display: "grid" },
-			children: [/* @__PURE__ */ jsxs(Button, {
-				onClick: () => setSelected(void 0),
-				css: {
-					justifyContent: "flex-start",
-					color: "inherit"
-				},
-				children: ["‹ ", selectedColumn.header]
-			}), /* @__PURE__ */ jsx(FilterPanel, {
-				column: selectedColumn,
-				close
-			}, selectedColumn.id)]
-		}) : /* @__PURE__ */ jsxs("div", {
-			css: {
-				padding: "calc(var(--spacing) * 2)",
-				display: "grid",
-				gap: "var(--spacing)"
-			},
-			children: [/* @__PURE__ */ jsx("div", { children: title }), columns.map((column) => /* @__PURE__ */ jsx(Button, {
-				onClick: () => setSelected(column.id),
-				onContextMenu: (event) => {
-					actions.setFilterValue(column.id, void 0);
-					event.preventDefault();
-				},
-				startIcon: /* @__PURE__ */ jsx(FilterList, { css: { color: color(isActive(column.id)) } }),
-				css: {
-					justifyContent: "flex-start",
-					color: isActive(column.id) ? "var(--primaryMain)" : "inherit"
-				},
-				children: column.header
-			}, column.id))]
-		})
-	})] });
-}
-//#endregion
 //#region src/components/tableHeader.tsx
 const TableHeader = memo(function TableHeader() {
 	const { props, visibleColumns } = useTableStructure();
@@ -1946,8 +1947,8 @@ const TableHeader = memo(function TableHeader() {
 					enableSelection && /* @__PURE__ */ jsx(SelectAll, {}),
 					enableColumnSelection && /* @__PURE__ */ jsx(ColumnSelection, {}),
 					enableExport && /* @__PURE__ */ jsx(Export, {}),
-					enableHiddenColumnFilters && /* @__PURE__ */ jsx(HiddenColumnFilters, {}),
-					(enableSelection || enableColumnSelection || enableExport || enableHiddenColumnFilters) && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", { css: { flex: 1 } }), /* @__PURE__ */ jsx(ResizeHandleView, {})] })
+					enableHiddenColumnFilters && visibleColumns.length === 0 && /* @__PURE__ */ jsx(HiddenColumnFilters, {}),
+					(enableSelection || enableColumnSelection || enableExport || enableHiddenColumnFilters && visibleColumns.length === 0) && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", { css: { flex: 1 } }), /* @__PURE__ */ jsx(ResizeHandleView, {})] })
 				]
 			}),
 			visibleColumns.map((column) => /* @__PURE__ */ jsx(ColumnContext.Provider, {