@dbcdk/react-components 0.0.3 → 0.0.5

package/dist/hooks/useTableSelection.cjs

@@ -0,0 +1,130 @@
+'use strict';
+
+var react = require('react');
+
+function useTableSelection({
+  storageKey,
+  items,
+  getId,
+  initialSelectedIds = /* @__PURE__ */ new Set(),
+  totalItems,
+  onSelectionChange,
+  selectionMode = "single"
+}) {
+  const [selectedIds, setSelectedIds] = react.useState(initialSelectedIds);
+  const [selectedItemMap, setSelectedItemMap] = react.useState(() => /* @__PURE__ */ new Map());
+  const itemsById = react.useMemo(() => {
+    const m = /* @__PURE__ */ new Map();
+    for (const item of items) m.set(getId(item), item);
+    return m;
+  }, [items, getId]);
+  react.useEffect(() => {
+    const stored = window.localStorage.getItem(storageKey);
+    if (!stored) {
+      setSelectedIds(initialSelectedIds);
+      return;
+    }
+    try {
+      const parsed = JSON.parse(stored);
+      setSelectedIds(new Set(parsed));
+    } catch {
+      setSelectedIds(initialSelectedIds);
+    }
+  }, [storageKey]);
+  react.useEffect(() => {
+    setSelectedItemMap((prev) => {
+      const next = /* @__PURE__ */ new Map();
+      for (const id of selectedIds) {
+        const item = itemsById.get(id);
+        if (item !== void 0) next.set(id, item);
+      }
+      if (next.size === prev.size) {
+        let same = true;
+        for (const [id, item] of next) {
+          if (prev.get(id) !== item) {
+            same = false;
+            break;
+          }
+        }
+        if (same) return prev;
+      }
+      return next;
+    });
+  }, [selectedIds, itemsById]);
+  const selectedItems = react.useMemo(() => Array.from(selectedItemMap.values()), [selectedItemMap]);
+  const allSelected = react.useMemo(() => {
+    if (typeof totalItems !== "number") return false;
+    return totalItems > 0 && selectedIds.size === totalItems;
+  }, [selectedIds, totalItems]);
+  const anySelected = react.useMemo(() => selectedIds.size > 0, [selectedIds]);
+  react.useEffect(() => {
+    window.localStorage.setItem(storageKey, JSON.stringify(Array.from(selectedIds)));
+    onSelectionChange == null ? void 0 : onSelectionChange({ selectedIds, selectedItems });
+  }, [selectedIds, selectedItems, storageKey, onSelectionChange]);
+  const toggleId = react.useCallback(
+    (id) => {
+      setSelectedIds((prevIds) => {
+        const nextIds = new Set(prevIds);
+        const isSelected = nextIds.has(id);
+        if (isSelected) {
+          nextIds.delete(id);
+        } else {
+          if (selectionMode === "single") nextIds.clear();
+          nextIds.add(id);
+        }
+        return nextIds;
+      });
+      setSelectedItemMap((prevMap) => {
+        const nextMap = new Map(prevMap);
+        const isSelected = nextMap.has(id);
+        if (isSelected) {
+          nextMap.delete(id);
+        } else {
+          if (selectionMode === "single") nextMap.clear();
+          const item = itemsById.get(id);
+          if (item !== void 0) nextMap.set(id, item);
+        }
+        return nextMap;
+      });
+    },
+    [itemsById, selectionMode]
+  );
+  const toggleItem = react.useCallback(
+    (item) => {
+      toggleId(getId(item));
+    },
+    [toggleId, getId]
+  );
+  const toggleAll = react.useCallback(
+    (selected) => {
+      if (!selected) {
+        clearSelection();
+      } else {
+        const nextIds = /* @__PURE__ */ new Set();
+        for (const item of items) {
+          nextIds.add(getId(item));
+        }
+        setSelectedIds(nextIds);
+        return nextIds;
+      }
+    },
+    [allSelected, getId, items]
+  );
+  const clearSelection = react.useCallback(() => {
+    setSelectedIds(/* @__PURE__ */ new Set());
+    setSelectedItemMap(/* @__PURE__ */ new Map());
+  }, []);
+  return {
+    selectedIds,
+    selectedItems,
+    selectedItemMap,
+    toggleItem,
+    toggleId,
+    clearSelection,
+    allSelected,
+    anySelected,
+    toggleAll
+  };
+}
+
+exports.useTableSelection = useTableSelection;

package/dist/hooks/useTableSelection.d.ts

@@ -0,0 +1,25 @@
+type Id = string | number;
+interface Props<T> {
+    storageKey: string;
+    items: T[];
+    getId: (item: T) => Id;
+    initialSelectedIds?: Set<Id>;
+    onSelectionChange?: (args: {
+        selectedIds: Set<Id>;
+        selectedItems: T[];
+    }) => void;
+    totalItems?: number;
+    selectionMode?: 'single' | 'multiple';
+}
+export declare function useTableSelection<T>({ storageKey, items, getId, initialSelectedIds, totalItems, onSelectionChange, selectionMode, }: Props<T>): {
+    selectedIds: Set<Id>;
+    selectedItems: T[];
+    selectedItemMap: Map<Id, T>;
+    toggleItem: (item: T) => void;
+    toggleId: (id: Id) => void;
+    clearSelection: () => void;
+    allSelected: boolean;
+    anySelected: boolean;
+    toggleAll: (selected: boolean) => void;
+};
+export {};

package/dist/hooks/useTableSelection.js

@@ -0,0 +1,128 @@
+import { useState, useMemo, useEffect, useCallback } from 'react';
+
+function useTableSelection({
+  storageKey,
+  items,
+  getId,
+  initialSelectedIds = /* @__PURE__ */ new Set(),
+  totalItems,
+  onSelectionChange,
+  selectionMode = "single"
+}) {
+  const [selectedIds, setSelectedIds] = useState(initialSelectedIds);
+  const [selectedItemMap, setSelectedItemMap] = useState(() => /* @__PURE__ */ new Map());
+  const itemsById = useMemo(() => {
+    const m = /* @__PURE__ */ new Map();
+    for (const item of items) m.set(getId(item), item);
+    return m;
+  }, [items, getId]);
+  useEffect(() => {
+    const stored = window.localStorage.getItem(storageKey);
+    if (!stored) {
+      setSelectedIds(initialSelectedIds);
+      return;
+    }
+    try {
+      const parsed = JSON.parse(stored);
+      setSelectedIds(new Set(parsed));
+    } catch {
+      setSelectedIds(initialSelectedIds);
+    }
+  }, [storageKey]);
+  useEffect(() => {
+    setSelectedItemMap((prev) => {
+      const next = /* @__PURE__ */ new Map();
+      for (const id of selectedIds) {
+        const item = itemsById.get(id);
+        if (item !== void 0) next.set(id, item);
+      }
+      if (next.size === prev.size) {
+        let same = true;
+        for (const [id, item] of next) {
+          if (prev.get(id) !== item) {
+            same = false;
+            break;
+          }
+        }
+        if (same) return prev;
+      }
+      return next;
+    });
+  }, [selectedIds, itemsById]);
+  const selectedItems = useMemo(() => Array.from(selectedItemMap.values()), [selectedItemMap]);
+  const allSelected = useMemo(() => {
+    if (typeof totalItems !== "number") return false;
+    return totalItems > 0 && selectedIds.size === totalItems;
+  }, [selectedIds, totalItems]);
+  const anySelected = useMemo(() => selectedIds.size > 0, [selectedIds]);
+  useEffect(() => {
+    window.localStorage.setItem(storageKey, JSON.stringify(Array.from(selectedIds)));
+    onSelectionChange == null ? void 0 : onSelectionChange({ selectedIds, selectedItems });
+  }, [selectedIds, selectedItems, storageKey, onSelectionChange]);
+  const toggleId = useCallback(
+    (id) => {
+      setSelectedIds((prevIds) => {
+        const nextIds = new Set(prevIds);
+        const isSelected = nextIds.has(id);
+        if (isSelected) {
+          nextIds.delete(id);
+        } else {
+          if (selectionMode === "single") nextIds.clear();
+          nextIds.add(id);
+        }
+        return nextIds;
+      });
+      setSelectedItemMap((prevMap) => {
+        const nextMap = new Map(prevMap);
+        const isSelected = nextMap.has(id);
+        if (isSelected) {
+          nextMap.delete(id);
+        } else {
+          if (selectionMode === "single") nextMap.clear();
+          const item = itemsById.get(id);
+          if (item !== void 0) nextMap.set(id, item);
+        }
+        return nextMap;
+      });
+    },
+    [itemsById, selectionMode]
+  );
+  const toggleItem = useCallback(
+    (item) => {
+      toggleId(getId(item));
+    },
+    [toggleId, getId]
+  );
+  const toggleAll = useCallback(
+    (selected) => {
+      if (!selected) {
+        clearSelection();
+      } else {
+        const nextIds = /* @__PURE__ */ new Set();
+        for (const item of items) {
+          nextIds.add(getId(item));
+        }
+        setSelectedIds(nextIds);
+        return nextIds;
+      }
+    },
+    [allSelected, getId, items]
+  );
+  const clearSelection = useCallback(() => {
+    setSelectedIds(/* @__PURE__ */ new Set());
+    setSelectedItemMap(/* @__PURE__ */ new Map());
+  }, []);
+  return {
+    selectedIds,
+    selectedItems,
+    selectedItemMap,
+    toggleItem,
+    toggleId,
+    clearSelection,
+    allSelected,
+    anySelected,
+    toggleAll
+  };
+}
+
+export { useTableSelection };

package/dist/hooks/useTableSettings.cjs

@@ -0,0 +1,28 @@
+'use strict';
+
+var react = require('react');
+
+function useTableSettings(storageKey) {
+  const [viewMode, setViewMode] = react.useState("compact");
+  react.useEffect(() => {
+    if (typeof window !== "undefined" && storageKey) {
+      const storedMode = window.localStorage.getItem(`dbc-table-settings:${storageKey}`);
+      if (storedMode === "compact" || storedMode === "comfortable") {
+        setViewMode(storedMode);
+      }
+    }
+  }, [storageKey]);
+  const toggleViewMode = react.useCallback(() => {
+    if (typeof window !== "undefined" && storageKey) {
+      const newMode = viewMode === "comfortable" ? "compact" : "comfortable";
+      window.localStorage.setItem(`dbc-table-settings:${storageKey}`, newMode);
+    }
+    setViewMode((prevMode) => prevMode === "comfortable" ? "compact" : "comfortable");
+  }, [storageKey, viewMode]);
+  return {
+    viewMode,
+    toggleViewMode
+  };
+}
+
+exports.useTableSettings = useTableSettings;

package/dist/hooks/useTableSettings.d.ts

@@ -0,0 +1,7 @@
+export type ViewMode = 'compact' | 'comfortable';
+interface TableSettings {
+    viewMode: ViewMode;
+    toggleViewMode: () => void;
+}
+export declare function useTableSettings(storageKey?: string): TableSettings;
+export {};

package/dist/hooks/useTableSettings.js

@@ -0,0 +1,26 @@
+import { useState, useEffect, useCallback } from 'react';
+
+function useTableSettings(storageKey) {
+  const [viewMode, setViewMode] = useState("compact");
+  useEffect(() => {
+    if (typeof window !== "undefined" && storageKey) {
+      const storedMode = window.localStorage.getItem(`dbc-table-settings:${storageKey}`);
+      if (storedMode === "compact" || storedMode === "comfortable") {
+        setViewMode(storedMode);
+      }
+    }
+  }, [storageKey]);
+  const toggleViewMode = useCallback(() => {
+    if (typeof window !== "undefined" && storageKey) {
+      const newMode = viewMode === "comfortable" ? "compact" : "comfortable";
+      window.localStorage.setItem(`dbc-table-settings:${storageKey}`, newMode);
+    }
+    setViewMode((prevMode) => prevMode === "comfortable" ? "compact" : "comfortable");
+  }, [storageKey, viewMode]);
+  return {
+    viewMode,
+    toggleViewMode
+  };
+}
+
+export { useTableSettings };

package/dist/hooks/useTimeDuration.cjs

@@ -0,0 +1,39 @@
+'use strict';
+
+var react = require('react');
+
+function defaultDuration(ms) {
+  if (!Number.isFinite(ms) || ms < 0) return "\u2014";
+  const sec = Math.floor(ms / 1e3) % 60;
+  const min = Math.floor(ms / (1e3 * 60)) % 60;
+  const hr = Math.floor(ms / (1e3 * 60 * 60));
+  return hr > 0 ? `${hr}t ${min}m ${sec}s` : `${min}m ${sec}s`;
+}
+function useTimeDuration({
+  start,
+  end,
+  dateFormat = { dateStyle: "short", timeStyle: "medium" },
+  fallback = "\u2014",
+  formatDuration = defaultDuration
+}) {
+  const [hydrated, setHydrated] = react.useState(false);
+  react.useEffect(() => setHydrated(true), []);
+  const started = react.useMemo(() => {
+    if (!start) return fallback;
+    if (!hydrated) return fallback;
+    return new Intl.DateTimeFormat(void 0, dateFormat).format(start);
+  }, [start, hydrated, fallback, dateFormat]);
+  const ended = react.useMemo(() => {
+    if (!end) return fallback;
+    if (!hydrated) return fallback;
+    return new Intl.DateTimeFormat(void 0, dateFormat).format(end);
+  }, [end, hydrated, fallback, dateFormat]);
+  const duration = react.useMemo(() => {
+    if (!start || !end) return fallback;
+    if (!hydrated) return fallback;
+    return formatDuration(end.getTime() - start.getTime());
+  }, [start, end, hydrated, fallback, formatDuration]);
+  return { started, ended, duration, hydrated };
+}
+
+exports.useTimeDuration = useTimeDuration;

package/dist/hooks/useTimeDuration.d.ts

@@ -0,0 +1,22 @@
+export type useTimeDuration = {
+    /** Formatted start date (hydration-safe) */
+    started: string;
+    /** Formatted end date (hydration-safe) */
+    ended: string;
+    /** Formatted duration (hydration-safe) */
+    duration: string;
+    /** Whether client hydration has completed */
+    hydrated: boolean;
+};
+type useTimeDurationArgs = {
+    start?: Date;
+    end?: Date;
+    /** Intl options for started/ended formatting */
+    dateFormat?: Intl.DateTimeFormatOptions;
+    /** Placeholder shown before hydration or when date is missing */
+    fallback?: string;
+    /** Custom duration formatter if you don’t want the default "1t 2m 3s" */
+    formatDuration?: (ms: number) => string;
+};
+export declare function useTimeDuration({ start, end, dateFormat, fallback, formatDuration, }: useTimeDurationArgs): useTimeDuration;
+export {};

package/dist/hooks/useTimeDuration.js

@@ -0,0 +1,37 @@
+import { useState, useEffect, useMemo } from 'react';
+
+function defaultDuration(ms) {
+  if (!Number.isFinite(ms) || ms < 0) return "\u2014";
+  const sec = Math.floor(ms / 1e3) % 60;
+  const min = Math.floor(ms / (1e3 * 60)) % 60;
+  const hr = Math.floor(ms / (1e3 * 60 * 60));
+  return hr > 0 ? `${hr}t ${min}m ${sec}s` : `${min}m ${sec}s`;
+}
+function useTimeDuration({
+  start,
+  end,
+  dateFormat = { dateStyle: "short", timeStyle: "medium" },
+  fallback = "\u2014",
+  formatDuration = defaultDuration
+}) {
+  const [hydrated, setHydrated] = useState(false);
+  useEffect(() => setHydrated(true), []);
+  const started = useMemo(() => {
+    if (!start) return fallback;
+    if (!hydrated) return fallback;
+    return new Intl.DateTimeFormat(void 0, dateFormat).format(start);
+  }, [start, hydrated, fallback, dateFormat]);
+  const ended = useMemo(() => {
+    if (!end) return fallback;
+    if (!hydrated) return fallback;
+    return new Intl.DateTimeFormat(void 0, dateFormat).format(end);
+  }, [end, hydrated, fallback, dateFormat]);
+  const duration = useMemo(() => {
+    if (!start || !end) return fallback;
+    if (!hydrated) return fallback;
+    return formatDuration(end.getTime() - start.getTime());
+  }, [start, end, hydrated, fallback, formatDuration]);
+  return { started, ended, duration, hydrated };
+}
+
+export { useTimeDuration };

package/dist/hooks/useViewportFill.js

@@ -1,4 +1,4 @@
-import { useState, useRef, useCallback, useLayoutEffect, useEffect } from 'react';
+import { useState, useRef, useCallback, useEffect, useLayoutEffect } from 'react';
 
 const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
 function useViewportFill(ref, { bottomOffset = 0, min = 120, includeMarginTop = false } = {}) {

package/dist/index.cjs

@@ -37,6 +37,23 @@ var Select = require('./components/select/Select');
 var SplitButton = require('./components/split-button/SplitButton');
 var Tooltip = require('./components/tooltip/Tooltip');
 var SegmentedProgressBar = require('./components/segmented-progress-bar/SegmentedProgressBar');
+var DateTimePicker = require('./components/datetime-picker/DateTimePicker');
+var ModalProvider = require('./components/modal/provider/ModalProvider');
+var Modal = require('./components/modal/Modal');
+var ToastProvider = require('./components/toast/provider/ToastProvider');
+var Toast = require('./components/toast/Toast');
+var AttributeChip = require('./components/attribute-chip/AttributeChip');
+var SplitPane = require('./components/split-pane/SplitPane');
+var Pagination = require('./components/pagination/Pagination');
+var MetaBar = require('./components/meta-bar/MetaBar');
+var CodeBlock = require('./components/code-block/CodeBlock');
+var useTimeDuration = require('./hooks/useTimeDuration');
+var useSorting = require('./hooks/useSorting');
+var usePagination = require('./hooks/usePagination');
+var useTableData = require('./hooks/useTableData');
+var useTableSelection = require('./hooks/useTableSelection');
+var useTableSettings = require('./hooks/useTableSettings');
+var TableSettings = require('./components/table/components/table-settings/TableSettings');
 
 
 
@@ -262,3 +279,105 @@ Object.keys(SegmentedProgressBar).forEach(function (k) {
 		get: function () { return SegmentedProgressBar[k]; }
 	});
 });
+Object.keys(DateTimePicker).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return DateTimePicker[k]; }
+	});
+});
+Object.keys(ModalProvider).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return ModalProvider[k]; }
+	});
+});
+Object.keys(Modal).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return Modal[k]; }
+	});
+});
+Object.keys(ToastProvider).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return ToastProvider[k]; }
+	});
+});
+Object.keys(Toast).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return Toast[k]; }
+	});
+});
+Object.keys(AttributeChip).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return AttributeChip[k]; }
+	});
+});
+Object.keys(SplitPane).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return SplitPane[k]; }
+	});
+});
+Object.keys(Pagination).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return Pagination[k]; }
+	});
+});
+Object.keys(MetaBar).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return MetaBar[k]; }
+	});
+});
+Object.keys(CodeBlock).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return CodeBlock[k]; }
+	});
+});
+Object.keys(useTimeDuration).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return useTimeDuration[k]; }
+	});
+});
+Object.keys(useSorting).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return useSorting[k]; }
+	});
+});
+Object.keys(usePagination).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return usePagination[k]; }
+	});
+});
+Object.keys(useTableData).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return useTableData[k]; }
+	});
+});
+Object.keys(useTableSelection).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return useTableSelection[k]; }
+	});
+});
+Object.keys(useTableSettings).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return useTableSettings[k]; }
+	});
+});
+Object.keys(TableSettings).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return TableSettings[k]; }
+	});
+});

package/dist/index.d.ts

@@ -35,3 +35,20 @@ export * from './components/select/Select';
 export * from './components/split-button/SplitButton';
 export * from './components/tooltip/Tooltip';
 export * from './components/segmented-progress-bar/SegmentedProgressBar';
+export * from './components/datetime-picker/DateTimePicker';
+export * from './components/modal/provider/ModalProvider';
+export * from './components/modal/Modal';
+export * from './components/toast/provider/ToastProvider';
+export * from './components/toast/Toast';
+export * from './components/attribute-chip/AttributeChip';
+export * from './components/split-pane/SplitPane';
+export * from './components/pagination/Pagination';
+export * from './components/meta-bar/MetaBar';
+export * from './components/code-block/CodeBlock';
+export * from './hooks/useTimeDuration';
+export * from './hooks/useSorting';
+export * from './hooks/usePagination';
+export * from './hooks/useTableData';
+export * from './hooks/useTableSelection';
+export * from './hooks/useTableSettings';
+export * from './components/table/components/table-settings/TableSettings';

package/dist/index.js

@@ -35,3 +35,20 @@ export * from './components/select/Select';
 export * from './components/split-button/SplitButton';
 export * from './components/tooltip/Tooltip';
 export * from './components/segmented-progress-bar/SegmentedProgressBar';
+export * from './components/datetime-picker/DateTimePicker';
+export * from './components/modal/provider/ModalProvider';
+export * from './components/modal/Modal';
+export * from './components/toast/provider/ToastProvider';
+export * from './components/toast/Toast';
+export * from './components/attribute-chip/AttributeChip';
+export * from './components/split-pane/SplitPane';
+export * from './components/pagination/Pagination';
+export * from './components/meta-bar/MetaBar';
+export * from './components/code-block/CodeBlock';
+export * from './hooks/useTimeDuration';
+export * from './hooks/useSorting';
+export * from './hooks/usePagination';
+export * from './hooks/useTableData';
+export * from './hooks/useTableSelection';
+export * from './hooks/useTableSettings';
+export * from './components/table/components/table-settings/TableSettings';