@kopexa/data-grid 18.1.0 → 18.3.0

package/dist/{chunk-KSAE2MI5.mjs → chunk-EVXFPN6F.mjs}

@@ -1,7 +1,14 @@
 "use client";
+import {
+  dataGridMessages
+} from "./chunk-M6DRKGKE.mjs";
 
 // src/data-grid.tsx
+import { Button, IconButton } from "@kopexa/button";
 import { Checkbox } from "@kopexa/checkbox";
+import { DropdownMenu } from "@kopexa/dropdown-menu";
+import { useSafeIntl } from "@kopexa/i18n";
+import { TableHeaderColumnIcon } from "@kopexa/icons";
 import { createContext } from "@kopexa/react-utils";
 import { cn } from "@kopexa/shared-utils";
 import { datagrid } from "@kopexa/theme";
@@ -36,6 +43,7 @@ function DataGrid(props) {
     isLoading = false,
     pageSize = 20,
     cellBorder,
+    columnVisibilityToggle,
     onRowClick,
     ...rest
   } = props;
@@ -80,9 +88,11 @@ function DataGrid(props) {
       rowBorder,
       cellBorder,
       loadingMode,
+      width,
       emptyMessage,
       isLoading,
       pageSize,
+      columnVisibilityToggle,
       onRowClick
     }),
     [
@@ -95,9 +105,11 @@ function DataGrid(props) {
       rowBorder,
       cellBorder,
       loadingMode,
+      width,
       emptyMessage,
       isLoading,
       pageSize,
+      columnVisibilityToggle,
       onRowClick
     ]
   );
@@ -141,23 +153,33 @@ function DataGridTableHeadRow({
 function DataGridTableBase({
   children,
   className,
+  style,
   ...restProps
 }) {
-  const { styles } = useDataGridContext();
+  const { styles, table, width } = useDataGridContext();
+  const minWidth = width === "fixed" ? table.getVisibleLeafColumns().reduce((acc, column) => acc + column.getSize(), 0) : void 0;
   return /* @__PURE__ */ jsx(
     "table",
     {
       "data-slot": "data-grid-table",
       className: styles.table({ className }),
+      style: minWidth ? { minWidth, ...style } : style,
       ...restProps,
       children
     }
   );
 }
+var STICKY_RIGHT_CELL = "sticky end-0 bg-background border-s border-border shadow-[-2px_0_5px_-2px_rgba(0,0,0,0.1)]";
+var stickyRightStyle = (z) => ({
+  position: "sticky",
+  right: 0,
+  zIndex: z
+});
 function DataGridTableHeadRowCell({
   children,
   header,
-  dndRef
+  dndRef,
+  stickyRight
 }) {
   var _a;
   const { styles, columnsPinnable } = useDataGridContext();
@@ -171,13 +193,15 @@ function DataGridTableHeadRowCell({
       ref: dndRef,
       style: {
         "--size": `${header.getSize()}px`,
-        ...columnsPinnable && isPinned && getPinningStyles(column)
+        ...columnsPinnable && isPinned && getPinningStyles(column),
+        ...stickyRight && stickyRightStyle(30)
       },
       "data-pinned": isPinned || void 0,
       "data-last-col": isLastLeftPinned ? "left" : isFirstRightPinned ? "right" : void 0,
       className: cn(
         styles.headerRowCell(),
-        (_a = header.column.columnDef.meta) == null ? void 0 : _a.headerClassName
+        (_a = header.column.columnDef.meta) == null ? void 0 : _a.headerClassName,
+        stickyRight && STICKY_RIGHT_CELL
       ),
       children
     },
@@ -214,8 +238,12 @@ function DataGridTableBody({
   return /* @__PURE__ */ jsx("tbody", { className: cn(styles.body({ className })), ...restProps, children });
 }
 function DataGridTableEmpty() {
-  const { styles, table, emptyMessage } = useDataGridContext();
-  const totalColumns = table.getAllColumns().length;
+  const { styles, table, emptyMessage, columnVisibilityToggle } = useDataGridContext();
+  const { append: hasSettingsColumn } = getSettingsPlacement(
+    table,
+    columnVisibilityToggle
+  );
+  const totalColumns = table.getVisibleLeafColumns().length + (hasSettingsColumn ? 1 : 0);
   return /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: totalColumns, className: styles.empty(), children: emptyMessage || "No data available." }) });
 }
 function DataGridTableBodyRowSkeleton({ children }) {
@@ -236,7 +264,8 @@ function DataGridTableBodyRowCell({
   children,
   cell,
   dndRef,
-  dndStyle
+  dndStyle,
+  stickyRight
 }) {
   var _a;
   const { styles, columnsResizable, columnsDraggable, columnsPinnable } = useDataGridContext();
@@ -252,14 +281,16 @@ function DataGridTableBodyRowCell({
       style: {
         "--size": `${column.getSize()}px`,
         ...columnsPinnable && isPinned && getPinningStyles(column),
-        ...dndStyle ? dndStyle : null
+        ...dndStyle ? dndStyle : null,
+        ...stickyRight && stickyRightStyle(10)
       },
       "data-pinned": isPinned || void 0,
       "data-last-col": isLastLeftPinned ? "left" : isFirstRightPinned ? "right" : void 0,
       className: cn(
         styles.bodyRowCell(),
         columnsResizable && column.getCanResize() && "truncate",
-        (_a = cell.column.columnDef.meta) == null ? void 0 : _a.cellClassName
+        (_a = cell.column.columnDef.meta) == null ? void 0 : _a.cellClassName,
+        stickyRight && STICKY_RIGHT_CELL
       ),
       children
     },
@@ -268,7 +299,8 @@ function DataGridTableBodyRowCell({
 }
 function DataGridTableBodyRowSkeletonCell({
   children,
-  column
+  column,
+  stickyRight
 }) {
   var _a;
   const { styles, columnsResizable, columnsPinnable } = useDataGridContext();
@@ -280,14 +312,16 @@ function DataGridTableBodyRowSkeletonCell({
     {
       style: {
         "--size": `${column.getSize()}px`,
-        ...columnsPinnable && isPinned && getPinningStyles(column)
+        ...columnsPinnable && isPinned && getPinningStyles(column),
+        ...stickyRight && stickyRightStyle(10)
       },
       "data-pinned": isPinned || void 0,
       "data-last-col": isLastLeftPinned ? "left" : isFirstRightPinned ? "right" : void 0,
       className: cn(
         styles.bodyRowSkeletonCell(),
         columnsResizable && column.getCanResize() && "truncate",
-        (_a = column.columnDef.meta) == null ? void 0 : _a.cellClassName
+        (_a = column.columnDef.meta) == null ? void 0 : _a.cellClassName,
+        stickyRight && STICKY_RIGHT_CELL
       ),
       children
     }
@@ -318,15 +352,33 @@ function DataGridTableBodyRow({
 }
 function DataGridTableBodyRowExpanded({ row }) {
   var _a, _b, _c;
-  const { table, styles } = useDataGridContext();
-  return /* @__PURE__ */ jsx("tr", { className: styles.bodyRowExpanded(), children: /* @__PURE__ */ jsx("td", { colSpan: row.getVisibleCells().length, children: (_c = (_b = (_a = table.getAllColumns().find((column) => {
+  const { table, styles, columnVisibilityToggle } = useDataGridContext();
+  const { append: hasSettingsColumn } = getSettingsPlacement(
+    table,
+    columnVisibilityToggle
+  );
+  return /* @__PURE__ */ jsx("tr", { className: styles.bodyRowExpanded(), children: /* @__PURE__ */ jsx("td", { colSpan: row.getVisibleCells().length + (hasSettingsColumn ? 1 : 0), children: (_c = (_b = (_a = table.getAllColumns().find((column) => {
     var _a2;
     return (_a2 = column.columnDef.meta) == null ? void 0 : _a2.expandedContent;
   })) == null ? void 0 : _a.columnDef.meta) == null ? void 0 : _b.expandedContent) == null ? void 0 : _c.call(_b, row.original) }) });
 }
+var SETTINGS_COLUMN_WIDTH = 44;
+function getSettingsPlacement(table, enabled) {
+  if (!enabled) return { append: false };
+  if (!table.getAllLeafColumns().some((column) => column.getCanHide())) {
+    return { append: false };
+  }
+  const leafColumns = table.getVisibleLeafColumns();
+  const lastColumn = leafColumns[leafColumns.length - 1];
+  if (lastColumn && lastColumn.accessorFn == null) {
+    return { reuseColumnId: lastColumn.id, append: false };
+  }
+  return { append: true };
+}
 function DataGridTable() {
   const {
     table,
+    styles,
     columnsResizable,
     columnsPinnable,
     stripped,
@@ -334,38 +386,98 @@ function DataGridTable() {
     cellBorder,
     loadingMode,
     isLoading,
-    pageSize
+    pageSize,
+    columnVisibilityToggle
   } = useDataGridContext();
+  const { reuseColumnId, append: showColumnSettings } = getSettingsPlacement(
+    table,
+    columnVisibilityToggle
+  );
+  const headerGroups = table.getHeaderGroups();
+  const settingsCellStyle = {
+    "--size": `${SETTINGS_COLUMN_WIDTH}px`
+  };
   return /* @__PURE__ */ jsxs(DataGridTableBase, { children: [
-    /* @__PURE__ */ jsx(DataGridTableHead, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(DataGridTableHeadRow, { headerGroup, children: headerGroup.headers.map((header) => {
-      const { column } = header;
-      return /* @__PURE__ */ jsxs(DataGridTableHeadRowCell, { header, children: [
-        header.isPlaceholder ? null : flexRender(
+    /* @__PURE__ */ jsx(DataGridTableHead, { children: headerGroups.map((headerGroup, groupIndex) => /* @__PURE__ */ jsxs(DataGridTableHeadRow, { headerGroup, children: [
+      headerGroup.headers.map((header) => {
+        const { column } = header;
+        const isReuseColumn = reuseColumnId != null && column.id === reuseColumnId;
+        const reuseToggleHere = isReuseColumn && groupIndex === headerGroups.length - 1;
+        const headerContent = header.isPlaceholder ? null : flexRender(
           header.column.columnDef.header,
           header.getContext()
-        ),
-        columnsResizable && column.getCanResize() && /* @__PURE__ */ jsx(DataGridTableHeadRowCellResize, { header })
-      ] }, column.id);
-    }) }, headerGroup.id)) }),
+        );
+        return /* @__PURE__ */ jsxs(
+          DataGridTableHeadRowCell,
+          {
+            header,
+            stickyRight: isReuseColumn,
+            children: [
+              reuseToggleHere ? /* @__PURE__ */ jsxs("span", { className: "flex w-full items-center justify-center gap-1.5", children: [
+                headerContent,
+                /* @__PURE__ */ jsx(DataGridHeaderColumnToggle, {})
+              ] }) : headerContent,
+              columnsResizable && column.getCanResize() && /* @__PURE__ */ jsx(DataGridTableHeadRowCellResize, { header })
+            ]
+          },
+          column.id
+        );
+      }),
+      showColumnSettings && /* @__PURE__ */ jsx(
+        "th",
+        {
+          className: cn(styles.headerRowCell(), STICKY_RIGHT_CELL),
+          style: { ...settingsCellStyle, ...stickyRightStyle(30) },
+          children: groupIndex === headerGroups.length - 1 && /* @__PURE__ */ jsx("span", { className: "flex justify-center", children: /* @__PURE__ */ jsx(DataGridHeaderColumnToggle, {}) })
+        }
+      )
+    ] }, headerGroup.id)) }),
     (stripped || !rowBorder) && !cellBorder && !columnsPinnable && /* @__PURE__ */ jsx(DataGridTableRowSpacer, {}),
-    /* @__PURE__ */ jsx(DataGridTableBody, { children: loadingMode === "skeleton" && isLoading && pageSize ? Array.from({ length: pageSize }).map((_, rowIndex) => /* @__PURE__ */ jsx(DataGridTableBodyRowSkeleton, { children: table.getVisibleFlatColumns().map((column, colIndex) => {
-      var _a;
-      return /* @__PURE__ */ jsx(
-        DataGridTableBodyRowSkeletonCell,
+    /* @__PURE__ */ jsx(DataGridTableBody, { children: loadingMode === "skeleton" && isLoading && pageSize ? Array.from({ length: pageSize }).map((_, rowIndex) => /* @__PURE__ */ jsxs(DataGridTableBodyRowSkeleton, { children: [
+      table.getVisibleFlatColumns().map((column, colIndex) => {
+        var _a;
+        return /* @__PURE__ */ jsx(
+          DataGridTableBodyRowSkeletonCell,
+          {
+            column,
+            stickyRight: reuseColumnId != null && column.id === reuseColumnId,
+            children: (_a = column.columnDef.meta) == null ? void 0 : _a.skeleton
+          },
+          colIndex.toString()
+        );
+      }),
+      showColumnSettings && /* @__PURE__ */ jsx(
+        "td",
         {
-          column,
-          children: (_a = column.columnDef.meta) == null ? void 0 : _a.skeleton
-        },
-        colIndex.toString()
-      );
-    }) }, rowIndex.toString())) : table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => {
+          className: cn(styles.bodyRowCell(), STICKY_RIGHT_CELL),
+          style: { ...settingsCellStyle, ...stickyRightStyle(10) }
+        }
+      )
+    ] }, rowIndex.toString())) : table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => {
       return /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(DataGridTableBodyRow, { row, children: row.getVisibleCells().map((cell) => {
-          return /* @__PURE__ */ jsx(DataGridTableBodyRowCell, { cell, children: flexRender(
-            cell.column.columnDef.cell,
-            cell.getContext()
-          ) }, cell.id);
-        }) }, row.id),
+        /* @__PURE__ */ jsxs(DataGridTableBodyRow, { row, children: [
+          row.getVisibleCells().map((cell) => {
+            return /* @__PURE__ */ jsx(
+              DataGridTableBodyRowCell,
+              {
+                cell,
+                stickyRight: reuseColumnId != null && cell.column.id === reuseColumnId,
+                children: flexRender(
+                  cell.column.columnDef.cell,
+                  cell.getContext()
+                )
+              },
+              cell.id
+            );
+          }),
+          showColumnSettings && /* @__PURE__ */ jsx(
+            "td",
+            {
+              className: cn(styles.bodyRowCell(), STICKY_RIGHT_CELL),
+              style: { ...settingsCellStyle, ...stickyRightStyle(10) }
+            }
+          )
+        ] }, row.id),
         row.getIsExpanded() && /* @__PURE__ */ jsx(DataGridTableBodyRowExpanded, { row })
       ] }, row.id);
     }) : /* @__PURE__ */ jsx(DataGridTableEmpty, {}) })
@@ -381,6 +493,52 @@ function getPinningStyles(column) {
     zIndex: isPinned ? 1 : 0
   };
 }
+function DataGridColumnToggle({
+  label,
+  align = "end",
+  children
+}) {
+  const { table } = useDataGridContext();
+  const t = useSafeIntl();
+  const columns = table.getAllLeafColumns().filter((column) => column.getCanHide());
+  if (columns.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(DropdownMenu.Root, { children: [
+    /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: children != null ? children : /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", children: [
+      /* @__PURE__ */ jsx(TableHeaderColumnIcon, { className: "size-4" }),
+      label != null ? label : t.formatMessage(dataGridMessages.columns)
+    ] }) }),
+    /* @__PURE__ */ jsx(DropdownMenu.Content, { align, children: columns.map((column) => {
+      var _a, _b;
+      return /* @__PURE__ */ jsx(
+        DropdownMenu.CheckboxItem,
+        {
+          checked: column.getIsVisible(),
+          onCheckedChange: (value) => column.toggleVisibility(!!value),
+          onSelect: (event) => event.preventDefault(),
+          children: (_b = (_a = column.columnDef.meta) == null ? void 0 : _a.headerTitle) != null ? _b : column.id
+        },
+        column.id
+      );
+    }) })
+  ] });
+}
+function DataGridHeaderColumnToggle() {
+  const t = useSafeIntl();
+  const label = t.formatMessage(dataGridMessages.columns);
+  return /* @__PURE__ */ jsx(DataGridColumnToggle, { align: "end", children: /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      "aria-label": label,
+      tooltip: label,
+      variant: "ghost",
+      size: "sm",
+      className: "shrink-0",
+      children: /* @__PURE__ */ jsx(TableHeaderColumnIcon, {})
+    }
+  ) });
+}
 function DataGridTableRowSelectAll({
   size
 }) {
@@ -428,7 +586,9 @@ function DataGridTableRowSelect({
 export {
   DataGrid,
   DataGridContainer,
+  SETTINGS_COLUMN_WIDTH,
   DataGridTable,
+  DataGridColumnToggle,
   DataGridTableRowSelectAll,
   DataGridTableRowSelect
 };

package/dist/chunk-M6DRKGKE.mjs

@@ -0,0 +1,15 @@
+"use client";
+
+// src/data-grid-messages.ts
+import { defineMessages } from "@kopexa/i18n";
+var dataGridMessages = defineMessages({
+  columns: {
+    id: "data-grid.columns",
+    defaultMessage: "Columns",
+    description: "Label for the column visibility toggle button"
+  }
+});
+
+export {
+  dataGridMessages
+};

package/dist/data-grid-messages.d.mts

@@ -0,0 +1,9 @@
+declare const dataGridMessages: {
+    columns: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};
+
+export { dataGridMessages };

package/dist/data-grid-messages.d.ts

@@ -0,0 +1,9 @@
+declare const dataGridMessages: {
+    columns: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};
+
+export { dataGridMessages };

package/dist/data-grid-messages.js

@@ -0,0 +1,38 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/data-grid-messages.ts
+var data_grid_messages_exports = {};
+__export(data_grid_messages_exports, {
+  dataGridMessages: () => dataGridMessages
+});
+module.exports = __toCommonJS(data_grid_messages_exports);
+var import_i18n = require("@kopexa/i18n");
+var dataGridMessages = (0, import_i18n.defineMessages)({
+  columns: {
+    id: "data-grid.columns",
+    defaultMessage: "Columns",
+    description: "Label for the column visibility toggle button"
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  dataGridMessages
+});

package/dist/data-grid-messages.mjs

@@ -0,0 +1,7 @@
+"use client";
+import {
+  dataGridMessages
+} from "./chunk-M6DRKGKE.mjs";
+export {
+  dataGridMessages
+};

package/dist/data-grid.d.mts

@@ -17,6 +17,14 @@ type BaseProps<TData extends object> = {
     emptyMessage?: string;
     isLoading?: boolean;
     pageSize?: number;
+    /**
+     * Render a column-visibility icon button in a trailing column header instead
+     * of relying on a standalone `<DataGrid.ColumnToggle />`. Reuses the last
+     * column's header when it's a display column (e.g. an actions column),
+     * otherwise appends a dedicated fixed-width settings column. No-op when no
+     * column is hideable.
+     */
+    columnVisibilityToggle?: boolean;
     onRowClick?: (row: TData) => void;
 };
 type DataGridProps<TData extends object> = BaseProps<TData> & DataGridVariants & {
@@ -28,7 +36,24 @@ declare function DataGridContainer({ children, className, }: {
     className?: string;
     border?: boolean;
 }): react_jsx_runtime.JSX.Element;
+declare const SETTINGS_COLUMN_WIDTH = 44;
 declare function DataGridTable<TData>(): react_jsx_runtime.JSX.Element;
+type DataGridColumnToggleProps = {
+    /**
+     * Trigger button label. Defaults to the translated "Columns" message;
+     * ignored when `children` is provided.
+     */
+    label?: string;
+    align?: "start" | "center" | "end";
+    /** Custom trigger; replaces the default button. */
+    children?: ReactNode;
+};
+/**
+ * Dropdown that toggles column visibility. Lists every hideable leaf column
+ * (`enableHiding !== false`) and reflects/sets `columnVisibility` on the table.
+ * Column labels come from `meta.headerTitle`, falling back to the column id.
+ */
+declare function DataGridColumnToggle({ label, align, children, }: DataGridColumnToggleProps): react_jsx_runtime.JSX.Element | null;
 declare function DataGridTableRowSelectAll({ size, }: {
     size?: "sm" | "md" | "lg";
 }): react_jsx_runtime.JSX.Element;
@@ -37,4 +62,4 @@ declare function DataGridTableRowSelect<TData>({ row, size, }: {
     size?: "sm" | "md" | "lg";
 }): react_jsx_runtime.JSX.Element;
 
-export { DataGrid, DataGridContainer, type DataGridProps, DataGridTable, DataGridTableRowSelect, DataGridTableRowSelectAll };
+export { DataGrid, DataGridColumnToggle, type DataGridColumnToggleProps, DataGridContainer, type DataGridProps, DataGridTable, DataGridTableRowSelect, DataGridTableRowSelectAll, SETTINGS_COLUMN_WIDTH };

package/dist/data-grid.d.ts

@@ -17,6 +17,14 @@ type BaseProps<TData extends object> = {
     emptyMessage?: string;
     isLoading?: boolean;
     pageSize?: number;
+    /**
+     * Render a column-visibility icon button in a trailing column header instead
+     * of relying on a standalone `<DataGrid.ColumnToggle />`. Reuses the last
+     * column's header when it's a display column (e.g. an actions column),
+     * otherwise appends a dedicated fixed-width settings column. No-op when no
+     * column is hideable.
+     */
+    columnVisibilityToggle?: boolean;
     onRowClick?: (row: TData) => void;
 };
 type DataGridProps<TData extends object> = BaseProps<TData> & DataGridVariants & {
@@ -28,7 +36,24 @@ declare function DataGridContainer({ children, className, }: {
     className?: string;
     border?: boolean;
 }): react_jsx_runtime.JSX.Element;
+declare const SETTINGS_COLUMN_WIDTH = 44;
 declare function DataGridTable<TData>(): react_jsx_runtime.JSX.Element;
+type DataGridColumnToggleProps = {
+    /**
+     * Trigger button label. Defaults to the translated "Columns" message;
+     * ignored when `children` is provided.
+     */
+    label?: string;
+    align?: "start" | "center" | "end";
+    /** Custom trigger; replaces the default button. */
+    children?: ReactNode;
+};
+/**
+ * Dropdown that toggles column visibility. Lists every hideable leaf column
+ * (`enableHiding !== false`) and reflects/sets `columnVisibility` on the table.
+ * Column labels come from `meta.headerTitle`, falling back to the column id.
+ */
+declare function DataGridColumnToggle({ label, align, children, }: DataGridColumnToggleProps): react_jsx_runtime.JSX.Element | null;
 declare function DataGridTableRowSelectAll({ size, }: {
     size?: "sm" | "md" | "lg";
 }): react_jsx_runtime.JSX.Element;
@@ -37,4 +62,4 @@ declare function DataGridTableRowSelect<TData>({ row, size, }: {
     size?: "sm" | "md" | "lg";
 }): react_jsx_runtime.JSX.Element;
 
-export { DataGrid, DataGridContainer, type DataGridProps, DataGridTable, DataGridTableRowSelect, DataGridTableRowSelectAll };
+export { DataGrid, DataGridColumnToggle, type DataGridColumnToggleProps, DataGridContainer, type DataGridProps, DataGridTable, DataGridTableRowSelect, DataGridTableRowSelectAll, SETTINGS_COLUMN_WIDTH };