@databiosphere/findable-ui 20.0.0 → 21.0.0

package/src/components/TableCreator/options/initialState/columnVisibility.ts

@@ -0,0 +1,22 @@
+import { RowData, TableOptions, VisibilityState } from "@tanstack/react-table";
+import { COLUMN_IDENTIFIER } from "../../../Table/common/columnIdentifier";
+
+/**
+ * Returns initial column visibility state.
+ * @param tableOptions - Table options.
+ * @returns column visibility state.
+ */
+export function getInitialColumnVisibilityState<T extends RowData>(
+  tableOptions?:
+    | Partial<TableOptions<T>>
+    | Partial<Omit<TableOptions<T>, "data" | "columns" | "getCoreRowModel">>
+): VisibilityState {
+  const { initialState } = tableOptions || {};
+  const enableRowPosition = Boolean(tableOptions?.enableRowPosition);
+  const enableRowSelection = Boolean(tableOptions?.enableRowSelection);
+  return {
+    [COLUMN_IDENTIFIER.ROW_POSITION]: enableRowPosition,
+    [COLUMN_IDENTIFIER.ROW_SELECTION]: enableRowSelection,
+    ...initialState?.columnVisibility,
+  };
+}

package/src/components/TableCreator/options/initialState/hook.ts

@@ -0,0 +1,24 @@
+import {
+  InitialTableState,
+  RowData,
+  TableOptions,
+} from "@tanstack/react-table";
+import { useMemo } from "react";
+import { getInitialColumnVisibilityState } from "./columnVisibility";
+
+export function useInitialState<T extends RowData>(
+  tableOptions?:
+    | Partial<TableOptions<T>>
+    | Partial<Omit<TableOptions<T>, "data" | "columns" | "getCoreRowModel">>
+): InitialTableState {
+  const { initialState } = tableOptions || {};
+  const columnVisibility = getInitialColumnVisibilityState(tableOptions);
+
+  return useMemo(
+    () => ({
+      ...initialState,
+      columnVisibility,
+    }),
+    [initialState, columnVisibility]
+  );
+}

package/src/components/TableCreator/options/visibility/constants.ts

@@ -0,0 +1,5 @@
+import { VisibilityOptions } from "@tanstack/react-table";
+
+export const VISIBILITY_OPTIONS: VisibilityOptions = {
+  enableHiding: true,
+};

package/src/components/TableCreator/options/visibility/hook.ts

@@ -0,0 +1,22 @@
+import {
+  Updater,
+  VisibilityOptions,
+  VisibilityState,
+} from "@tanstack/react-table";
+import { useCallback } from "react";
+import { useExploreState } from "../../../../hooks/useExploreState";
+import { updateVisibility } from "../../../../providers/exploreState/actions/updateVisibility/dispatch";
+import { VISIBILITY_OPTIONS } from "./constants";
+
+export function useVisibilityOptions(): VisibilityOptions {
+  const { exploreDispatch } = useExploreState();
+
+  const onColumnVisibilityChange = useCallback(
+    (updaterOrValue: Updater<VisibilityState>): void => {
+      exploreDispatch(updateVisibility({ updaterOrValue }));
+    },
+    [exploreDispatch]
+  );
+
+  return { ...VISIBILITY_OPTIONS, onColumnVisibilityChange };
+}

package/src/components/TableCreator/tableCreator.tsx

@@ -2,7 +2,6 @@ import {
   CellContext,
   ColumnDef,
   CoreOptions,
-  HeaderContext,
   RowData,
 } from "@tanstack/react-table";
 import React, { useMemo } from "react";
@@ -11,15 +10,8 @@ import { PAPER_PANEL_STYLE } from "../common/Paper/paper";
 import { ComponentCreator } from "../ComponentCreator/ComponentCreator";
 import { Loading } from "../Loading/loading";
 import { COLUMN_DEF } from "../Table/common/columnDef";
-import {
-  arrIncludesSome,
-  getInitialState,
-  sortingFn,
-} from "../Table/common/utils";
-import { RowSelectionCell } from "../Table/components/TableCell/components/RowSelectionCell/rowSelectionCell";
-import { HeadSelectionCell } from "../Table/components/TableHead/components/HeadSelectionCell/headSelectionCell";
+import { arrIncludesSome, sortingFn } from "../Table/common/utils";
 import { Table } from "../Table/table";
-import { COLUMN_CONFIGS } from "./common/constants";
 import { buildBaseColumnDef } from "./common/utils";
 import { useTableOptions } from "./options/hook";
 import { TableCreator as TableCreatorContainer } from "./tableCreator.styles";
@@ -45,16 +37,6 @@ const createCell = <T extends RowData = RowData, TData = unknown>(
     );
   };
 
-const createHeaderSelectionCell = <T extends RowData>() =>
-  function CellCreator({ table }: HeaderContext<T, unknown>): JSX.Element {
-    return <HeadSelectionCell tableInstance={table} />;
-  };
-
-const createRowSelectionCell = <T extends RowData>() =>
-  function CellCreator({ row }: CellContext<T, unknown>): JSX.Element {
-    return <RowSelectionCell row={row} />;
-  };
-
 export const TableCreator = <T extends RowData>({
   columns,
   getRowId,
@@ -78,17 +60,12 @@ export const TableCreator = <T extends RowData>({
         [
           /* Initialize column definitions with the "row position" column */
           COLUMN_DEF.ROW_POSITION,
-          /* Initialize column definitions with the "select" column */
-          {
-            ...buildBaseColumnDef(COLUMN_CONFIGS.SELECT),
-            cell: createRowSelectionCell(),
-            header: createHeaderSelectionCell(),
-          },
+          /* Initialize column definitions with the "row selection" column */
+          COLUMN_DEF.ROW_SELECTION,
         ] as ColumnDef<T>[]
       ),
     [columns]
   );
-  const initialState = getInitialState(columns);
   return (
     <TableCreatorContainer>
       <Loading
@@ -99,7 +76,6 @@ export const TableCreator = <T extends RowData>({
       <Table<T>
         columns={columnDefs}
         getRowId={getRowId}
-        initialState={initialState}
         items={items}
         listView={listView}
         loading={loading}

package/src/config/entities.ts

@@ -105,13 +105,13 @@ export type ColumnConfig<
   // eslint-disable-next-line @typescript-eslint/no-explicit-any -- This config model is part of a generic array
   C extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = any
 > = Omit<ColumnDef<T, TValue>, "enableMultiSort"> & {
+  // @deprecated - Use `meta.columnPinned` instead.
   columnPinned?: boolean; // Column is pinned to the top when table rows are collapsable.
-  columnVisible?: boolean; // Column is visible. Default is "true".
   componentConfig: ComponentConfig<C, T>;
-  disableHiding?: boolean; // Disables hiding of column. Column is unavailable for "Edit Columns" functionality when "true".
   header: string;
   id: string; // The unique identifier for the column.
   meta?: ColumnMeta<T, unknown>;
+  // @deprecated - Use `meta.width` instead.
   width: GridTrackSize;
 };
 
@@ -258,7 +258,6 @@ export type GridTrackSize =
  */
 export interface ListConfig<T extends RowData> {
   columns: ColumnConfig<T>[];
-  defaultSort?: ColumnSort; // Establishes initial table state "sorting" state.
   tableOptions?: Omit<TableOptions<T>, "columns" | "data" | "getCoreRowModel">; // Additional TanStack Table's options.
 }
 
@@ -268,7 +267,6 @@ export interface ListConfig<T extends RowData> {
 export interface ListViewConfig {
   disablePagination?: boolean;
   enableDownload?: boolean;
-  enableRowPreview?: boolean;
   enableTab?: boolean;
   listHero?: ComponentsConfig;
   rowPreviewView?: ComponentsConfig; // Row preview view is expected to be a modal or drawer or similar.

package/src/providers/exploreState/actions/updateVisibility/action.ts

@@ -0,0 +1,29 @@
+import { ExploreState } from "../../../exploreState";
+import { updateEntityPageState } from "../../utils";
+import { UpdateColumnVisibilityPayload } from "./types";
+import { buildNextColumnVisibility } from "./utils";
+
+/**
+ * Reducer function to handle the "update column visibility" action.
+ * Updates the column visibility in the state for the current entity.
+ * @param state - Explore State.
+ * @param payload - Payload.
+ * @returns explore state.
+ */
+export function updateColumnVisibilityAction(
+  state: ExploreState,
+  payload: UpdateColumnVisibilityPayload
+): ExploreState {
+  const columnVisibility = buildNextColumnVisibility(
+    state,
+    payload.updaterOrValue
+  );
+  return {
+    ...state,
+    entityPageState: updateEntityPageState(
+      state.tabValue,
+      state.entityPageState,
+      { columnVisibility }
+    ),
+  };
+}

package/src/providers/exploreState/actions/updateVisibility/dispatch.ts

@@ -0,0 +1,19 @@
+import { ExploreActionKind } from "../../../exploreState";
+import {
+  UpdateColumnVisibilityAction,
+  UpdateColumnVisibilityPayload,
+} from "./types";
+
+/**
+ * Action creator for updating column visibility in the state.
+ * @param payload - Payload.
+ * @returns Action with payload and action type.
+ */
+export function updateVisibility(
+  payload: UpdateColumnVisibilityPayload
+): UpdateColumnVisibilityAction {
+  return {
+    payload,
+    type: ExploreActionKind.UpdateColumnVisibility,
+  };
+}

package/src/providers/exploreState/actions/updateVisibility/types.ts

@@ -0,0 +1,11 @@
+import { Updater, VisibilityState } from "@tanstack/react-table";
+import { ExploreActionKind } from "../../../exploreState";
+
+export type UpdateColumnVisibilityAction = {
+  payload: UpdateColumnVisibilityPayload;
+  type: ExploreActionKind.UpdateColumnVisibility;
+};
+
+export type UpdateColumnVisibilityPayload = {
+  updaterOrValue: Updater<VisibilityState>;
+};

package/src/providers/exploreState/actions/updateVisibility/utils.ts

@@ -0,0 +1,28 @@
+import { Updater, VisibilityState } from "@tanstack/react-table";
+import { resolveUpdater } from "../../../../components/Table/options/updater";
+import { ExploreState } from "../../../exploreState";
+
+/**
+ * Builds the next column visibility state for the current entity type.
+ * Uses TanStack updater to update the column visibility state.
+ * @param state - Explore state.
+ * @param updaterOrValue - Updater or value to update the column visibility state.
+ * @returns column visibility state.
+ */
+export function buildNextColumnVisibility(
+  state: ExploreState,
+  updaterOrValue: Updater<VisibilityState>
+): VisibilityState {
+  return resolveUpdater(updaterOrValue, getOldColumnVisibility(state));
+}
+
+/**
+ * Retrieves the current "old" state from the explore state, for the current entity type.
+ * @param state - Explore state.
+ * @returns old column visibility state.
+ */
+function getOldColumnVisibility(state: ExploreState): VisibilityState {
+  const { entityPageState, tabValue } = state;
+  const { columnVisibility = {} } = entityPageState[tabValue];
+  return columnVisibility;
+}

package/src/providers/exploreState/entities.ts

@@ -21,7 +21,7 @@ import {
 
 export interface EntityPageState {
   categoryGroupConfigKey: CategoryGroupConfigKey;
-  columnsVisibility: VisibilityState;
+  columnVisibility: VisibilityState;
   enableRowSelection: boolean;
   grouping: GroupingState;
   rowPreview: RowPreviewState;

package/src/providers/exploreState/initializer/utils.ts

@@ -4,8 +4,7 @@ import {
   VisibilityState,
 } from "@tanstack/react-table";
 import { SelectCategory, SelectedFilter } from "../../../common/entities";
-import { getInitialTableColumnVisibility } from "../../../components/Table/common/utils";
-import { ACCESSOR_KEYS } from "../../../components/TableCreator/common/constants";
+import { getInitialColumnVisibilityState } from "../../../components/TableCreator/options/initialState/columnVisibility";
 import {
   CategoryConfig,
   CategoryGroup,
@@ -151,20 +150,9 @@ function initCategoryGroups(
  */
 function initColumnVisibility(entityConfig: EntityConfig): VisibilityState {
   const {
-    list: {
-      columns,
-      tableOptions: {
-        enableRowSelection,
-        initialState: { columnVisibility = {} } = {},
-      } = {},
-    },
+    list: { tableOptions = {} },
   } = entityConfig;
-  return {
-    [ACCESSOR_KEYS.ROW_POSITION]: false, // Explicitly setting row position to false; required - currently `columnVisibility` is initialized from columns configuration.
-    [ACCESSOR_KEYS.SELECT]: Boolean(enableRowSelection),
-    ...getInitialTableColumnVisibility(columns),
-    ...columnVisibility, // `columnVisibility` is managed by ExploreState; use table options to override this setting.
-  };
+  return getInitialColumnVisibilityState(tableOptions);
 }
 
 /**
@@ -187,7 +175,7 @@ function initEntityPageState(config: SiteConfig): EntityPageStateMapper {
       ...acc,
       [entity.route]: {
         categoryGroupConfigKey: initCategoryGroupConfigKey(config, entity),
-        columnsVisibility: initColumnVisibility(entity),
+        columnVisibility: initColumnVisibility(entity),
         enableRowSelection: initEnableRowSelection(entity),
         grouping: initGrouping(entity),
         rowPreview: undefined,
@@ -269,12 +257,8 @@ function initGrouping(entityConfig: EntityConfig): GroupingState {
  */
 function initSorting(entityConfig: EntityConfig): ColumnSort[] {
   const {
-    list: {
-      defaultSort,
-      tableOptions: { initialState: { sorting = [] } = {} } = {},
-    },
+    list: { tableOptions: { initialState: { sorting = [] } = {} } = {} },
   } = entityConfig;
-  if (defaultSort) return [defaultSort];
   return sorting;
 }
 

package/src/providers/exploreState/payloads/entities.ts

@@ -2,7 +2,6 @@ import {
   ColumnSort,
   GroupingState,
   RowSelectionState,
-  VisibilityState,
 } from "@tanstack/react-table";
 import {
   CategoryKey,
@@ -52,11 +51,6 @@ export interface ProcessExploreResponsePayload {
  */
 export type ResetExploreResponsePayload = undefined;
 
-/**
- * Update column visibility payload.
- */
-export type UpdateColumnVisibilityPayload = VisibilityState;
-
 /**
  * Update entity filters payload.
  */

package/src/providers/exploreState/utils.ts

@@ -3,8 +3,8 @@ import {
   CategoryValueKey,
   SelectedFilter,
 } from "../../common/entities";
+import { COLUMN_IDENTIFIER } from "../../components/Table/common/columnIdentifier";
 import { RowPreviewState } from "../../components/Table/features/RowPreview/entities";
-import { ACCESSOR_KEYS } from "../../components/TableCreator/common/constants";
 import { ExploreState, ListItems, PaginationState } from "../exploreState";
 import {
   CategoryGroupConfigKey,
@@ -264,7 +264,7 @@ export function updateEntityStateByCategoryGroupConfigKey(
 
 /**
  *  Updates the entity page state for each entity with row selection enabled,
- *  by updating the visibility of the "select" column based on user access and resetting row selection state.
+ *  by updating the visibility of the "rowSelection" column based on user access and resetting row selection state.
  * @param state - Explore state.
  * @param canEdit - User has edit access.
  * @returns new entity page state mapper with updated column visibility and row selection state.
@@ -280,9 +280,9 @@ export function updateSelectColumnVisibility(
           ...acc,
           [entityPath]: {
             ...entityPageState,
-            columnsVisibility: {
-              ...entityPageState.columnsVisibility,
-              [ACCESSOR_KEYS.SELECT]: canEdit,
+            columnVisibility: {
+              ...entityPageState.columnVisibility,
+              [COLUMN_IDENTIFIER.ROW_SELECTION]: canEdit,
             },
             rowSelection: {},
           },

package/src/providers/exploreState.tsx

@@ -21,6 +21,8 @@ import { useConfig } from "../hooks/useConfig";
 import { useURLFilterParams } from "../hooks/useURLFilterParams";
 import { updateGroupingAction } from "./exploreState/actions/updateGrouping/action";
 import { UpdateGroupingAction } from "./exploreState/actions/updateGrouping/types";
+import { updateColumnVisibilityAction } from "./exploreState/actions/updateVisibility/action";
+import { UpdateColumnVisibilityAction } from "./exploreState/actions/updateVisibility/types";
 import {
   EntityPageStateMapper,
   EntityStateByCategoryGroupConfigKey,
@@ -37,7 +39,6 @@ import {
   PatchExploreResponsePayload,
   ProcessExploreResponsePayload,
   ResetExploreResponsePayload,
-  UpdateColumnVisibilityPayload,
   UpdateEntityFiltersPayload,
   UpdateEntityViewAccessPayload,
   UpdateFilterPayload,
@@ -318,14 +319,6 @@ type SelectEntityTypeAction = {
   type: ExploreActionKind.SelectEntityType;
 };
 
-/**
- * Update column visibility action.
- */
-type UpdateColumnVisibilityAction = {
-  payload: UpdateColumnVisibilityPayload;
-  type: ExploreActionKind.UpdateColumnVisibility;
-};
-
 /**
  * Update entity filters action.
  */
@@ -581,15 +574,7 @@ function exploreReducer(
      * Update column visibility
      **/
     case ExploreActionKind.UpdateColumnVisibility: {
-      const columnsVisibility = payload;
-      return {
-        ...state,
-        entityPageState: updateEntityPageState(
-          state.tabValue,
-          state.entityPageState,
-          { columnsVisibility }
-        ),
-      };
+      return updateColumnVisibilityAction(state, payload);
     }
     /**
      * Update entity filters.

package/lib/components/Table/components/CheckboxMenu/checkboxMenu.d.ts

@@ -1,16 +0,0 @@
-type MenuListItemOnChangeFn = (event: unknown) => void;
-type onResetFn = () => void;
-export interface CheckboxMenuListItem {
-    checked: boolean;
-    disabled?: boolean;
-    label: string;
-    onChange: MenuListItemOnChangeFn;
-    value: string;
-}
-export interface CheckboxMenuProps {
-    label: string;
-    onReset: onResetFn;
-    options: CheckboxMenuListItem[];
-}
-export declare const CheckboxMenu: ({ label: buttonLabel, onReset, options, }: CheckboxMenuProps) => JSX.Element;
-export {};

package/lib/components/Table/components/CheckboxMenu/checkboxMenu.js

@@ -1,28 +0,0 @@
-import { Checkbox, ListItem, ListItemButton, ListItemText, } from "@mui/material";
-import React, { useState } from "react";
-import { ButtonTextPrimary } from "../../../common/Button/components/ButtonTextPrimary/buttonTextPrimary";
-import { DropdownButton } from "../../../common/Button/components/DropdownButton/dropdownButton";
-import { CheckedIcon } from "../../../common/CustomIcon/components/CheckedIcon/checkedIcon";
-import { UncheckedIcon } from "../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon";
-import { Menu } from "./checkboxMenu.styles";
-export const CheckboxMenu = ({ label: buttonLabel, onReset, options, }) => {
-    const [anchorEl, setAnchorEl] = useState(null);
-    const open = Boolean(anchorEl);
-    const onOpenMenu = (event) => {
-        setAnchorEl(event.currentTarget);
-    };
-    const onCloseMenu = () => {
-        setAnchorEl(null);
-    };
-    return (React.createElement(React.Fragment, null,
-        React.createElement(DropdownButton, { onClick: onOpenMenu, open: open }, buttonLabel),
-        React.createElement(Menu, { anchorEl: anchorEl, anchorOrigin: { horizontal: "right", vertical: "bottom" }, onClose: onCloseMenu, open: open, slotProps: { paper: { variant: "menu" } }, transformOrigin: {
-                horizontal: "right",
-                vertical: "top",
-            } },
-            options.map(({ checked, disabled = false, label, onChange, value }) => (React.createElement(ListItemButton, { disabled: disabled, key: value, onClick: onChange, role: undefined },
-                React.createElement(Checkbox, { checked: checked, checkedIcon: React.createElement(CheckedIcon, null), disabled: disabled, icon: React.createElement(UncheckedIcon, null) }),
-                React.createElement(ListItemText, { disableTypography: true, primary: React.createElement("span", null, label) })))),
-            React.createElement(ListItem, { component: "div" },
-                React.createElement(ButtonTextPrimary, { onClick: onReset }, "Reset")))));
-};

package/lib/components/Table/components/CheckboxMenu/checkboxMenu.stories.d.ts

@@ -1,5 +0,0 @@
-import { ComponentMeta } from "@storybook/react";
-import { CheckboxMenu } from "./checkboxMenu";
-declare const _default: ComponentMeta<typeof CheckboxMenu>;
-export default _default;
-export declare const CheckboxMenuStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./checkboxMenu").CheckboxMenuProps>;

package/lib/components/Table/components/CheckboxMenu/checkboxMenu.stories.js

@@ -1,46 +0,0 @@
-import React from "react";
-import { CheckboxMenu } from "./checkboxMenu";
-export default {
-    argTypes: {
-        label: { control: "text" },
-        onReset: { control: { disabled: true } },
-        options: { control: "array" },
-    },
-    component: CheckboxMenu,
-    title: "Components/Common/Menu/CheckboxMenu",
-};
-const CheckboxMenuTemplate = (args) => (React.createElement(CheckboxMenu, { ...args }));
-const onChange = () => {
-    // onChange function
-};
-const onReset = () => {
-    // onReset function
-};
-export const CheckboxMenuStory = CheckboxMenuTemplate.bind({});
-CheckboxMenuStory.args = {
-    label: "Options",
-    onReset: onReset,
-    options: [
-        {
-            checked: true,
-            disabled: true,
-            label: "Item 1",
-            onChange,
-            value: "item_1",
-        },
-        {
-            checked: false,
-            disabled: false,
-            label: "Item 2",
-            onChange,
-            value: "item_2",
-        },
-        {
-            checked: true,
-            disabled: false,
-            label: "Item 3",
-            onChange,
-            value: "item_3",
-        },
-    ],
-};

package/lib/components/Table/components/CheckboxMenu/checkboxMenu.styles.d.ts

@@ -1,3 +0,0 @@
-export declare const Menu: import("@emotion/styled").StyledComponent<import("@mui/material").MenuProps & {
-    theme?: import("@emotion/react").Theme;
-}, {}, {}>;

package/lib/components/Table/components/CheckboxMenu/checkboxMenu.styles.js

@@ -1,21 +0,0 @@
-import styled from "@emotion/styled";
-import { Menu as MMenu } from "@mui/material";
-export const Menu = styled(MMenu) `
-  .MuiPaper-menu {
-    margin: 4px 0;
-  }
-
-  // List item button
-  .MuiListItemButton-root {
-    gap: 8px;
-  }
-
-  // List item
-  .MuiListItem-root {
-    padding: 10px 16px;
-  }
-
-  .MuiListItemButton-root.Mui-disabled {
-    opacity: 1;
-  }
-`;

package/lib/components/Table/features/constants.d.ts

@@ -1,6 +0,0 @@
-import { PaginationState } from "@tanstack/react-table";
-/**
- * Default TanStack pagination state.
- * See https://tanstack.com/table/latest/docs/guide/custom-features#getinitialstate.
- */
-export declare const DEFAULT_PAGINATION: PaginationState;

package/lib/components/Table/features/constants.js

@@ -1,8 +0,0 @@
-/**
- * Default TanStack pagination state.
- * See https://tanstack.com/table/latest/docs/guide/custom-features#getinitialstate.
- */
-export const DEFAULT_PAGINATION = {
-    pageIndex: 0,
-    pageSize: 10,
-};

package/lib/components/TableCreator/common/constants.d.ts

@@ -1,7 +0,0 @@
-import { RowData } from "@tanstack/react-table";
-import { ColumnConfig } from "../../../config/entities";
-export declare const ACCESSOR_KEYS: {
-    ROW_POSITION: string;
-    SELECT: string;
-};
-export declare const COLUMN_CONFIGS: Record<string, ColumnConfig<RowData>>;

package/lib/components/TableCreator/common/constants.js

@@ -1,21 +0,0 @@
-import { RowSelectionCell } from "../../Table/components/TableCell/components/RowSelectionCell/rowSelectionCell";
-export const ACCESSOR_KEYS = {
-    ROW_POSITION: "rowPosition",
-    SELECT: "select",
-};
-export const COLUMN_CONFIGS = {
-    SELECT: {
-        columnPinned: false,
-        columnVisible: false,
-        componentConfig: { component: RowSelectionCell },
-        disableHiding: true,
-        enableGrouping: false,
-        enableSorting: false,
-        header: ACCESSOR_KEYS.SELECT,
-        id: ACCESSOR_KEYS.SELECT,
-        meta: {
-            header: "",
-        },
-        width: "max-content",
-    },
-};