@absreim/react-bootstrap-data-grid-pro 3.0.0 → 4.0.0

package/grid.scss

@@ -0,0 +1,231 @@
+@use "sass:color";
+@use "sass:math";
+
+$rbdg-prefix: "rbdg-";
+
+.rbdg-grid > div,
+.rbdg-grid > div > div,
+.rbdg-grid > div > div > div {
+  border-color: inherit;
+  border-style: solid;
+  border-width: 0;
+}
+
+// While these rules seem to work, the way that the three border modes, default; bordered; and borderless override each
+// other is quite hard to understand.
+// Consider refactoring so that each type mode, including default, has a separate class that contains rules for just
+// that mode.
+// The way that each border mode that interacts with dividers with quite complicated. Each combination should be tested
+// separately.
+
+.rbdg-grid {
+  // In Bootstrap's _tables.scss file, there are variable declarations here to reset some variables to the initial
+  // value to facilitate nesting of tables styled with Bootstrap's "table" CSS class. Unlike _tables.scss, there is no
+  // reset in this file because the RBDG flex grid is not meant to be nested.
+
+  --#{$rbdg-prefix}grid-color: #{$table-color};
+  --#{$rbdg-prefix}grid-bg: #{$table-bg};
+  --#{$rbdg-prefix}grid-border-color: #{$table-border-color};
+  --#{$rbdg-prefix}grid-accent-bg: #{$table-accent-bg};
+  --#{$rbdg-prefix}grid-striped-color: #{$table-striped-color};
+  --#{$rbdg-prefix}grid-striped-bg: #{$table-striped-bg};
+  --#{$rbdg-prefix}grid-active-color: #{$table-active-color};
+  --#{$rbdg-prefix}grid-active-bg: #{$table-active-bg};
+  --#{$rbdg-prefix}grid-hover-color: #{$table-hover-color};
+  --#{$rbdg-prefix}grid-hover-bg: #{$table-hover-bg};
+
+  border-color: var(--#{$rbdg-prefix}grid-border-color);
+
+  > div {
+    width: min-content;
+
+    > div > div {
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+      padding: $table-cell-padding-y $table-cell-padding-x;
+      color: var(
+        --#{$rbdg-prefix}grid-color-state,
+        var(--#{$rbdg-prefix}grid-color-type, var(--#{$rbdg-prefix}grid-color))
+      );
+      background-color: var(--#{$rbdg-prefix}grid-bg);
+      border-bottom-width: $table-border-width;
+      box-shadow: inset 0 0 0 9999px
+        var(
+          --#{$rbdg-prefix}grid-bg-state,
+          var(
+            --#{$rbdg-prefix}grid-bg-type,
+            var(--#{$rbdg-prefix}grid-accent-bg)
+          )
+        );
+    }
+  }
+
+  // These properties are overridden by the "> div > div > div:not(:last-child)" properties when rbdg-grid-bordered is
+  // applied.
+  > div:first-child > div > div {
+    border-bottom-width: var(
+      --#{$rbdg-prefix}grid-divider-border-width,
+      var(--#{$rbdg-prefix}grid-divider-borderless-width, $table-border-width)
+    );
+    border-bottom-style: var(
+      --#{$rbdg-prefix}grid-divider-border-style,
+      inherit
+    );
+    border-bottom-color: var(
+      --#{$rbdg-prefix}grid-divider-border-color,
+      inherit
+    );
+  }
+}
+
+.rbdg-grid-group-divider {
+  --#{$rbdg-prefix}grid-divider-border-width: calc(#{$table-border-width} * 2);
+  --#{$rbdg-prefix}grid-divider-border-style: solid;
+  --#{$rbdg-prefix}grid-divider-border-color: #{$table-group-separator-color};
+}
+
+.rbdg-grid-sm {
+  > div > div > div {
+    padding: $table-cell-padding-y-sm $table-cell-padding-x-sm;
+  }
+}
+
+.rbdg-grid-bordered {
+  border-width: $table-border-width;
+  border-style: solid;
+
+  > div > div {
+    > div:not(:last-child) {
+      border-width: 0 $table-border-width 0 0;
+    }
+
+    > div:last-child {
+      border-width: 0;
+    }
+  }
+
+  > div:first-child > div {
+    border-top-width: 0;
+    border-right-width: 0;
+    border-left-width: 0;
+    border-bottom-width: var(
+      --#{$rbdg-prefix}grid-divider-border-width,
+      var(--#{$rbdg-prefix}grid-divider-borderless-width, $table-border-width)
+    );
+    border-bottom-style: var(
+      --#{$rbdg-prefix}grid-divider-border-style,
+      inherit
+    );
+    border-bottom-color: var(
+      --#{$rbdg-prefix}grid-divider-border-color,
+      inherit
+    );
+  }
+
+  > div:last-child {
+    > div:not(:last-child) {
+      border-width: 0 0 $table-border-width 0;
+    }
+  }
+}
+
+.rbdg-grid-borderless {
+  --#{$rbdg-prefix}grid-divider-borderless-width: 0;
+
+  > div > div > div {
+    border-bottom-width: 0;
+  }
+
+  > :not(:first-child) {
+    border-top-width: 0;
+  }
+}
+
+.rbdg-grid-striped {
+  > div:nth-of-type(2) > div:nth-of-type(#{$table-striped-order}) > div {
+    --#{$rbdg-prefix}grid-color-type: var(--#{$rbdg-prefix}grid-striped-color);
+    --#{$rbdg-prefix}grid-bg-type: var(--#{$rbdg-prefix}grid-striped-bg);
+  }
+}
+
+.rbdg-grid-striped-columns {
+  > div > div > :nth-child(#{$table-striped-columns-order}) {
+    --#{$rbdg-prefix}grid-color-type: var(--#{$rbdg-prefix}grid-striped-color);
+    --#{$rbdg-prefix}grid-bg-type: var(--#{$rbdg-prefix}grid-striped-bg);
+  }
+}
+
+.rbdg-grid-active {
+  --#{$rbdg-prefix}grid-color-state: var(--#{$prefix}grid-active-color);
+  --#{$rbdg-prefix}grid-bg-state: var(--#{$rbdg-prefix}grid-active-bg);
+}
+
+.rbdg-grid-hover {
+  > div:nth-of-type(2) > div:hover > div {
+    --#{$rbdg-prefix}grid-color-state: var(--#{$rbdg-prefix}grid-hover-color);
+    --#{$rbdg-prefix}grid-bg-state: var(--#{$rbdg-prefix}grid-hover-bg);
+  }
+}
+
+@mixin rbdg-grid-variant($state, $background) {
+  .rbdg-grid-#{$state} {
+    $color: color-contrast(opaque($body-bg, $background));
+    $hover-bg: color.mix(
+      $color,
+      $background,
+      math.percentage($table-hover-bg-factor)
+    );
+    $striped-bg: color.mix(
+      $color,
+      $background,
+      math.percentage($table-striped-bg-factor)
+    );
+    $active-bg: color.mix(
+      $color,
+      $background,
+      math.percentage($table-active-bg-factor)
+    );
+    $table-border-color: color.mix(
+      $color,
+      $background,
+      math.percentage($table-border-factor)
+    );
+
+    --#{$rbdg-prefix}grid-color: #{$color};
+    --#{$rbdg-prefix}grid-bg: #{$background};
+    --#{$rbdg-prefix}grid-border-color: #{$table-border-color};
+    --#{$rbdg-prefix}grid-striped-bg: #{$striped-bg};
+    --#{$rbdg-prefix}grid-striped-color: #{color-contrast($striped-bg)};
+    --#{$rbdg-prefix}grid-active-bg: #{$active-bg};
+    --#{$rbdg-prefix}grid-active-color: #{color-contrast($active-bg)};
+    --#{$rbdg-prefix}grid-hover-bg: #{$hover-bg};
+    --#{$rbdg-prefix}grid-hover-color: #{color-contrast($hover-bg)};
+
+    color: var(--#{$rbdg-prefix}grid-color);
+    border-color: var(--#{$rbdg-prefix}grid-border-color);
+  }
+}
+
+@each $color, $value in $table-variants {
+  @include rbdg-grid-variant($color, $value);
+}
+
+// Note about Responsive Tables
+//
+// The Bootstrap _tables.scss file contains a series of classes to apply responsive tables at various breakpoints.
+// There is no such equivalent for RBDG flex grid for the following reason.
+//
+// The RBDG flex grid is a div of type "block," so the concept of "responsive" scrollable breakpoints doesn't apply.
+// It appears that for a table, even if the width is to 100%, the browser sometimes disobeys this setting causing
+// the width to be more than the parent, hence the need for responsive tables. Divs do not appear to have this problem.
+//
+// The RBDG flex grid provides other options to achieving a horizontally scrollable grid. They are as follows.
+//
+// When using the default or "auto" setting for the RBDG grid's "width," the intrinsic width of the grid columns is
+// used. In such circumstances, if one wants to make the grid scrollable horizontally, they can enclose the grid in a
+// horizontally-scrollable div.
+//
+// When the grid's width is to set to "parent", the grid takes on the width of the parent (width 100% CSS value) just
+// like the Bootstrap table does. In this case, the grid div itself is horizontally scrollable. In contrast, for
+// responsive Bootstrap tables, it is a div that encloses the table element that is scrollable.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@absreim/react-bootstrap-data-grid-pro",
   "description": "Pro Version of data grid UI component for use with web apps using React and Bootstrap",
-  "version": "3.0.0",
+  "version": "4.0.0",
   "license": "Commercial. See LICENSE file.",
   "author": "Brook Li",
   "homepage": "https://react-bootstrap-data-grid.vercel.app/",

package/pro/index.d.ts

@@ -0,0 +1,5 @@
+export * from "../grid";
+export * from "../table-pro";
+export { default as Grid } from "../grid";
+export { default as Table } from "../table";
+export { default as TablePro } from "../table-pro";

package/pro/index.js

@@ -0,0 +1,5 @@
+export * from "../grid";
+export * from "../table-pro";
+export { default as Grid } from "../grid";
+export { default as Table } from "../table";
+export { default as TablePro } from "../table-pro";

package/{grid/InternalGrid.d.ts → table/InternalTable.d.ts}

@@ -1,9 +1,9 @@
 import { FC, ReactNode } from "react";
-import { BaseGridProps } from "./types";
-import { UseCombinedPipelineHook } from "./pipeline/useCombinedPipeline";
-import { UseGridSelectionFnsHook } from "./pipeline/useGridSelectionFns";
+import { BaseTableProps } from "./types";
+import { UseCombinedPipelineHook } from "../common/pipeline/useCombinedPipeline";
+import { UseGridSelectionFnsHook } from "../common/pipeline/useGridSelectionFns";
 export interface InternalGridProps {
-    gridProps: BaseGridProps;
+    gridProps: BaseTableProps;
     hooks: {
         selectFns: UseGridSelectionFnsHook;
         pipelineOutput: UseCombinedPipelineHook;
@@ -17,5 +17,5 @@ export interface InternalGridProps {
         headerRow?: string[];
     };
 }
-declare const InternalGrid: FC<InternalGridProps>;
-export default InternalGrid;
+declare const InternalTable: FC<InternalGridProps>;
+export default InternalTable;

package/{grid/InternalGrid.js → table/InternalTable.js}

@@ -2,13 +2,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import SelectAllHeaderCell from "./selection/SelectAllHeaderCell";
-import Pagination from "./pagination/Pagination";
+import Pagination from "../common/pagination/Pagination";
 import classNames from "classnames";
-import useInterfaces from "./toolbar/useInterfaces";
-import ToolbarContainer from "./toolbar/ToolbarContainer";
-import useExportFn from "./export/useExportFn";
-import getWidthStyle from "./util/getWidthStyle";
-const InternalGrid = ({ gridProps: { rows, cols, pagination, filterModel, selectModel, editModel, caption, styleModel, displayMode, allowExport, }, hooks: { pipelineOutput, selectFns }, slots: { colHeaderCells, bodyRows, prefixHeader }, classes, }) => {
+import useInterfaces from "../common/toolbar/useInterfaces";
+import ToolbarContainer from "../common/toolbar/ToolbarContainer";
+import useExportFn from "../common/export/useExportFn";
+import getWidthStyle from "../common/util/getWidthStyle";
+const InternalTable = ({ gridProps: { rows, cols, pagination, filterModel, selectModel, editModel, caption, styleModel, displayMode, allowExport, }, hooks: { pipelineOutput, selectFns }, slots: { colHeaderCells, bodyRows, prefixHeader }, classes, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     const { normalizedTableFilterModel, filteredRows, filterState, sortedRowsOutput: { sortedRows }, currentPageRowsOutput: { paginatedRows, normalizedModel }, showSelectCol, } = pipelineOutput;
     const exportFnInfo = useExportFn({
@@ -55,4 +55,4 @@ const InternalGrid = ({ gridProps: { rows, cols, pagination, filterModel, select
     return (_jsxs("div", { "data-testid": "rbdg-top-level-div", className: classNames((_h = styleModel === null || styleModel === void 0 ? void 0 : styleModel.additionalComponentsStyleModel) === null || _h === void 0 ? void 0 : _h.topLevelDiv), children: [showToolbar && (_jsx(ToolbarContainer, { interfaceGen: toolbarInterfaces, styleModel: styleModel === null || styleModel === void 0 ? void 0 : styleModel.toolbarStyleModel })), _jsxs("div", { "data-testid": "rbdg-table-and-pagination-div", className: classNames((_j = styleModel === null || styleModel === void 0 ? void 0 : styleModel.additionalComponentsStyleModel) === null || _j === void 0 ? void 0 : _j.tableAndPaginationDiv), children: [_jsx("div", { "data-testid": "rbdg-table-div", className: classNames(((_k = styleModel === null || styleModel === void 0 ? void 0 : styleModel.additionalComponentsStyleModel) === null || _k === void 0 ? void 0 : _k.tableDiv) ||
                             "table-responsive"), children: mainTable }), normalizedModel && (_jsx(Pagination, { normalizedModel: normalizedModel, prePagingNumRows: sortedRows.length, containerDivClasses: (_l = styleModel === null || styleModel === void 0 ? void 0 : styleModel.additionalComponentsStyleModel) === null || _l === void 0 ? void 0 : _l.paginationUiDiv }))] })] }));
 };
-export default InternalGrid;
+export default InternalTable;

package/table/Table.d.ts

@@ -0,0 +1,5 @@
+import { FC } from "react";
+import { TableProps } from "./types";
+declare const Table: FC<TableProps>;
+export default Table;
+export type { TableProps } from "./types";

package/{grid/Grid.js → table/Table.js}

@@ -1,14 +1,14 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
-import InternalGrid from "./InternalGrid";
+import InternalTable from "./InternalTable";
 import ColHeaderCell from "./main/ColHeaderCell";
-import useCombinedPipeline from "./pipeline/useCombinedPipeline";
-import useGridSelectionFns from "./pipeline/useGridSelectionFns";
-import useGetInputStrSubmitCallback from "./pipeline/useGetInputStrSubmitCallback";
-import useAugFormattedRows from "./pipeline/useAugFormattedRows";
+import useCombinedPipeline from "../common/pipeline/useCombinedPipeline";
+import useGridSelectionFns from "../common/pipeline/useGridSelectionFns";
+import useGetInputStrSubmitCallback from "../common/pipeline/useGetInputStrSubmitCallback";
+import useAugFormattedRows from "../common/pipeline/useAugFormattedRows";
 import BodyRows from "./main/BodyRows";
-const Grid = (props) => {
+import useColNameToWidth from "../common/pipeline/useColNameToWidth";
+const Table = (props) => {
     const { rows, cols, filterModel, sortModel, pagination, selectModel, styleModel, editModel, } = props;
     const combinedPipelineOutput = useCombinedPipeline({
         rows,
@@ -21,11 +21,7 @@ const Grid = (props) => {
     const { sortedRowsOutput: { sortColDef, setSortColDef, sortingEnabled }, showSelectCol, displayRows, } = combinedPipelineOutput;
     const gridSelectionFns = useGridSelectionFns(selectModel, rows);
     const getInputStrSubmitCallback = useGetInputStrSubmitCallback(editModel, cols);
-    const colNameToWidth = useMemo(() => {
-        const map = {};
-        cols.forEach(({ name, width }) => (map[name] = width));
-        return map;
-    }, [cols]);
+    const colNameToWidth = useColNameToWidth(cols);
     const augFormattedRows = useAugFormattedRows(colNameToWidth, displayRows);
     const colHeaderCells = cols.map(({ name, label, sortable, width }, index) => {
         var _a;
@@ -41,9 +37,9 @@ const Grid = (props) => {
                 styleModel.mainTableStyleModel.theadTh(index), width: width }, name));
     });
     const bodyRows = (_jsx(BodyRows, { augFormattedRows: augFormattedRows, gridSelectionFns: gridSelectionFns, selectModel: selectModel, combinedPipelineOutput: combinedPipelineOutput, editModel: editModel, getInputStrSubmitCallback: getInputStrSubmitCallback, tableStyleModel: styleModel === null || styleModel === void 0 ? void 0 : styleModel.mainTableStyleModel }));
-    return (_jsx(InternalGrid, { gridProps: props, hooks: {
+    return (_jsx(InternalTable, { gridProps: props, hooks: {
             pipelineOutput: combinedPipelineOutput,
             selectFns: gridSelectionFns,
         }, slots: { colHeaderCells, bodyRows } }));
 };
-export default Grid;
+export default Table;

package/{grid → table}/editing/EditableRow.d.ts

@@ -1,7 +1,6 @@
 import { CSSProperties, FC, ReactNode } from "react";
-import { RowId } from "../types";
 import React from "react";
-import { CellData } from "./types";
+import { CellData, RowId } from "../../common/types";
 export type EditableRowProps = Pick<React.ComponentProps<"tr">, "onClick" | "className" | "aria-rowindex" | "aria-selected"> & {
     ariaColIndexOffset: number;
     dataRowId: RowId;

package/{grid → table}/editing/EditableRow.js

@@ -1,10 +1,10 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState } from "react";
-import { dateToDatetimeInputStr, dateToInputStr } from "../util/datetime";
+import { dateToDatetimeInputStr, dateToInputStr, } from "../../common/util/datetime";
 import EditControlsCell from "./EditControlsCell";
 import classNames from "classnames";
-import getWidthStyle from "../util/getWidthStyle";
+import getWidthStyle from "../../common/util/getWidthStyle";
 const initValueToFormValue = (value, type) => {
     switch (type) {
         case "date":

package/table/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./types";
+export * from "./styling/types";
+export * from "../common/selection/types";
+export * from "../common";
+export { default } from "./Table";

package/table/index.js

@@ -0,0 +1,5 @@
+export * from "./types";
+export * from "./styling/types";
+export * from "../common/selection/types";
+export * from "../common";
+export { default } from "./Table";

package/{grid → table}/main/BodyRows.d.ts

@@ -1,11 +1,11 @@
-import { AugFormattedRow, RowId } from "../types";
 import { FC, ReactNode } from "react";
-import { UseGridSelectionFnsHook } from "../pipeline/useGridSelectionFns";
-import { UseCombinedPipelineHook } from "../pipeline/useCombinedPipeline";
-import { SelectModel } from "../selection/types";
-import { EditModel } from "../editing/types";
-import { UseGetInputStrSubmitCallbackHook } from "../pipeline/useGetInputStrSubmitCallback";
+import { UseGridSelectionFnsHook } from "../../common/pipeline/useGridSelectionFns";
+import { UseCombinedPipelineHook } from "../../common/pipeline/useCombinedPipeline";
+import { SelectModel } from "../../common/selection/types";
+import { UseGetInputStrSubmitCallbackHook } from "../../common/pipeline/useGetInputStrSubmitCallback";
 import { TableStyleModel } from "../styling/types";
+import { AugFormattedRow, FormattedRow, RowId } from "../../common/types";
+import { EditModel } from "../../common/editing/types";
 interface BodyRowsProps {
     augFormattedRows: AugFormattedRow[];
     gridSelectionFns: UseGridSelectionFnsHook;
@@ -15,7 +15,7 @@ interface BodyRowsProps {
     editModel: EditModel | undefined;
     getInputStrSubmitCallback: UseGetInputStrSubmitCallbackHook;
     additionalColIndexOffset?: number;
-    renderPrefixCells?: (augFormattedRows: AugFormattedRow) => ReactNode;
+    renderPrefixCells?: (augFormattedRows: FormattedRow) => ReactNode;
     additionalRowStyles?: (rowId: RowId, displayIndex: number) => string[];
 }
 declare const BodyRows: FC<BodyRowsProps>;

package/{grid → table}/main/BodyRows.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import EditableRow from "../editing/EditableRow";
 import classNames from "classnames";
-import getWidthStyle from "../util/getWidthStyle";
+import getWidthStyle from "../../common/util/getWidthStyle";
 import SelectionInput from "../selection/SelectionInput";
 const BodyRows = ({ augFormattedRows, gridSelectionFns: { selectedSet, getSelectInputModel, getSelectHandler, getRowClickHandler, getAriaSelectedValue, }, tableStyleModel, combinedPipelineOutput: { showSelectCol, ariaColIndexOffset }, selectModel, editModel, getInputStrSubmitCallback, additionalColIndexOffset, renderPrefixCells, additionalRowStyles, }) => augFormattedRows.map((row, index) => {
     return (_jsxs(EditableRow, { onClick: getRowClickHandler(row.id), className: classNames({

package/{grid → table}/main/ColHeaderCell/index.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from "classnames";
-import getWidthStyle from "../../util/getWidthStyle";
-import useSortHeaderStates from "./useSortHeaderStates";
-import sortOrderToAriaSort from "../../sorting/sortOrderToAriaSort";
+import getWidthStyle from "../../../common/util/getWidthStyle";
+import useSortHeaderStates from "../../../common/sorting/useSortHeaderStates";
+import sortOrderToAriaSort from "../../../common/sorting/sortOrderToAriaSort";
 const ColHeaderCell = ({ label, sortModel, ariaColIndex, additionalClasses, width, }) => {
     const { handleClick, handleMouseOver, handleMouseOut, sortSymbol } = useSortHeaderStates(sortModel);
     return (_jsxs("th", { className: classNames({

package/{grid → table}/selection/SelectAllHeaderCell.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties, FC } from "react";
-import { SelectionInfo } from "./types";
+import { SelectionInfo } from "../../common/selection/types";
 interface SelectAllHeaderCellProps {
     onClick: () => void;
     selectionInfo: SelectionInfo;

package/table/style.scss

@@ -0,0 +1,3 @@
+.rbdg-sort-toggler {
+  cursor: pointer;
+}

package/{grid → table}/styling/types.d.ts

@@ -1,4 +1,4 @@
-import { RowId } from "../types";
+import { RowId } from "../../common/types";
 export interface SharedTableStyleModel {
     table?: string[];
     tbody?: string[];
@@ -39,23 +39,3 @@ export interface AdditionalComponentsStyleModel {
     tableDiv?: string[];
     paginationUiDiv?: string[];
 }
-export interface ToolbarStyleModel {
-    activeButton?: string[];
-    inactiveButton?: string[];
-    toolbar?: string[];
-    interfaceContainer?: string[];
-}
-export interface ExportFormStyleModel {
-    legend?: string[];
-    radioContainer?: string[];
-    radioInput?: string[];
-    radioLabel?: string[];
-    submitButton?: string[];
-}
-export interface StyleModel {
-    mainTableStyleModel?: TableStyleModel;
-    filterInputTableStyleModel?: FilterInputTableStyleModel;
-    additionalComponentsStyleModel?: AdditionalComponentsStyleModel;
-    toolbarStyleModel?: ToolbarStyleModel;
-    exportFormStyleModel?: ExportFormStyleModel;
-}

package/table/styling/types.js

@@ -0,0 +1 @@
+export {};

package/table/types.d.ts

@@ -0,0 +1,19 @@
+import { ColSortModel } from "../common/sorting/types";
+import { ColDefBase, MainComponentSharedProps } from "../common/types";
+import { StyleModel } from "../common/styling/types";
+export type DisplayMode = "table" | "block";
+export type TableProps = MainComponentSharedProps & {
+    caption?: string;
+    styleModel?: StyleModel;
+    displayMode?: DisplayMode;
+};
+export type BaseTableProps = Omit<TableProps, "cols"> & {
+    cols: ColDefBase[];
+};
+export interface ColHeaderCellProps {
+    label: string;
+    sortModel?: ColSortModel;
+    ariaColIndex: number;
+    additionalClasses?: string[] | null;
+    width?: number;
+}

package/table/types.js

@@ -0,0 +1 @@
+export {};

package/{grid-pro → table-pro}/ColHeaderCellPro.js

@@ -2,11 +2,11 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo, useRef, } from "react";
 import classNames from "classnames";
-import getWidthStyle from "../grid/util/getWidthStyle";
-import useSortHeaderStates from "../grid/main/ColHeaderCell/useSortHeaderStates";
+import getWidthStyle from "../common/util/getWidthStyle";
+import useSortHeaderStates from "../common/sorting/useSortHeaderStates";
 import VerticalGrip from "./assets/VerticalGrip";
-import regDragCleanup from "./util/regDragCleanup";
-import sortOrderToAriaSort from "../grid/sorting/sortOrderToAriaSort";
+import regDragCleanup from "./lib/regDragCleanup";
+import sortOrderToAriaSort from "../common/sorting/sortOrderToAriaSort";
 const setWidthStyle = (cells, width) => {
     cells.forEach((cell) => {
         cell.style.minWidth = `${width}px`;

package/table-pro/TablePro.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { TableProProps } from "./types";
+declare const TablePro: FC<TableProProps>;
+export default TablePro;

package/{grid-pro/GridPro.js → table-pro/TablePro.js}

@@ -1,20 +1,20 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo } from "react";
-import useCombinedPipeline from "../grid/pipeline/useCombinedPipeline";
-import InternalGrid from "../grid/InternalGrid";
+import useCombinedPipeline from "../common/pipeline/useCombinedPipeline";
+import InternalTable from "../table/InternalTable";
 import ColHeaderCellPro from "./ColHeaderCellPro";
-import useGridSelectionFns from "../grid/pipeline/useGridSelectionFns";
-import useGetInputStrSubmitCallback from "../grid/pipeline/useGetInputStrSubmitCallback";
-import useAugFormattedRows from "../grid/pipeline/useAugFormattedRows";
+import useGridSelectionFns from "../common/pipeline/useGridSelectionFns";
+import useGetInputStrSubmitCallback from "../common/pipeline/useGetInputStrSubmitCallback";
+import useAugFormattedRows from "../common/pipeline/useAugFormattedRows";
 import useResizeModel from "./resize/useResizeModel";
-import BodyRows from "../grid/main/BodyRows";
+import BodyRows from "../table/main/BodyRows";
 import ReorderHeaderCell from "./reorder/ReorderHeaderCell";
 import ReorderHandleCell from "./reorder/ReorderHandleCell";
 import useKeyboardReorder from "./reorder/useKeyboardReorder";
 import useReorderStyles from "./reorder/useReorderStyles";
 import useKeyboardReorderListener from "./reorder/useKeyboardReorderListener";
-const GridPro = (props) => {
+const TablePro = (props) => {
     const { rows, cols, editModel, filterModel, sortModel, pagination, selectModel, styleModel, displayMode, reorder, } = props;
     const combinedPipelineOutput = useCombinedPipeline({
         rows,
@@ -117,11 +117,11 @@ const GridPro = (props) => {
     ]);
     const bodyRows = (_jsx(BodyRows, { augFormattedRows: augFormattedRows, gridSelectionFns: gridSelectionFns, selectModel: selectModel, combinedPipelineOutput: combinedPipelineOutput, editModel: editModel, getInputStrSubmitCallback: getInputStrSubmitCallback, renderPrefixCells: renderPrefixCells, additionalColIndexOffset: reorder ? 1 : 0, additionalRowStyles: additionalBodyRowStyles, tableStyleModel: styleModel === null || styleModel === void 0 ? void 0 : styleModel.mainTableStyleModel }));
     const prefixHeader = reorder ? _jsx(ReorderHeaderCell, {}) : null;
-    return (_jsx(InternalGrid, { gridProps: props, hooks: {
+    return (_jsx(InternalTable, { gridProps: props, hooks: {
             pipelineOutput: combinedPipelineOutput,
             selectFns: gridSelectionFns,
         }, slots: { colHeaderCells, bodyRows, prefixHeader }, classes: {
             headerRow: additionalHeaderRowStyles,
         } }));
 };
-export default GridPro;
+export default TablePro;

package/{grid-pro → table-pro}/index.d.ts

@@ -1,5 +1,5 @@
-export * from "../grid";
-export { default } from "./GridPro";
+export * from "../table";
+export { default } from "./TablePro";
 export * from "./types";
 export * from "./util";
 export * from "./reorder/types";

package/{grid-pro → table-pro}/index.js

@@ -1,5 +1,5 @@
-export * from "../grid";
-export { default } from "./GridPro";
+export * from "../table";
+export { default } from "./TablePro";
 export * from "./types";
 export * from "./util";
 export * from "./reorder/types";

package/{grid-pro → table-pro}/reorder/ReorderHandleCell.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, } from "react";
 import HorizontalGrip from "../assets/HorizontalGrip";
-import regDragCleanup from "../util/regDragCleanup";
+import regDragCleanup from "../lib/regDragCleanup";
 import classNames from "classnames";
 function dropTargetRefValuesEqual(first, second) {
     if (first === null && second === null) {

package/{grid-pro → table-pro}/reorder/useKeyboardReorder.js

@@ -1,5 +1,5 @@
 import { useCallback, useMemo, useState } from "react";
-import trueModulo from "../../grid/util/trueModulo";
+import trueModulo from "../../common/util/trueModulo";
 const useKeyboardReorder = (displayRowIds) => {
     const [state, setState] = useState(null);
     // A change the displayed rows can suddenly make the existing state invalid.

package/{grid-pro → table-pro}/resize/useResizeModel.d.ts

@@ -1,5 +1,5 @@
 import { ProColDef } from "../types";
-import { DisplayMode } from "../../grid";
+import { DisplayMode } from "../../table";
 import { ResizeModel } from "./types";
 declare const useResizeModel: (cols: Pick<ProColDef, "resizeable" | "width" | "name">[], display: DisplayMode | undefined) => ResizeModel;
 export default useResizeModel;