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

package/table/InternalTable.js

@@ -0,0 +1,58 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import SelectAllHeaderCell from "./selection/SelectAllHeaderCell";
+import Pagination from "../common/pagination/Pagination";
+import classNames from "classnames";
+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({
+        rows,
+        cols,
+        filteredRows: filterModel && filteredRows,
+        currentPageRows: pagination && paginatedRows,
+    });
+    const showToolbar = filterModel || allowExport;
+    const toolbarPropGen = useMemo(() => (closeUiCallback) => {
+        return {
+            filtering: filterState && filterModel && normalizedTableFilterModel
+                ? {
+                    filterState: filterState,
+                    setFilterState: normalizedTableFilterModel.setTableFilterState,
+                    caption: filterModel.filterTableCaption,
+                    styleModel: styleModel === null || styleModel === void 0 ? void 0 : styleModel.filterInputTableStyleModel,
+                    closeFormCallback: closeUiCallback,
+                }
+                : undefined,
+            exporting: allowExport
+                ? {
+                    exportFnInfo,
+                    styleModel: styleModel === null || styleModel === void 0 ? void 0 : styleModel.exportFormStyleModel,
+                    closeCallback: closeUiCallback,
+                }
+                : undefined,
+        };
+    }, [
+        allowExport,
+        exportFnInfo,
+        filterModel,
+        filterState,
+        normalizedTableFilterModel,
+        styleModel === null || styleModel === void 0 ? void 0 : styleModel.exportFormStyleModel,
+        styleModel === null || styleModel === void 0 ? void 0 : styleModel.filterInputTableStyleModel,
+    ]);
+    const toolbarInterfaces = useInterfaces(toolbarPropGen);
+    const { rowsAreSelectable, selectionInfo, selectAllOnClick } = selectFns;
+    const mainTable = (_jsxs("table", { className: classNames({
+            "table-hover": rowsAreSelectable,
+            "d-block": displayMode === "block",
+        }, ((_a = styleModel === null || styleModel === void 0 ? void 0 : styleModel.mainTableStyleModel) === null || _a === void 0 ? void 0 : _a.table) || "table"), "aria-rowcount": filteredRows.length + 1, children: [caption !== undefined && (_jsx("caption", { className: classNames((_b = styleModel === null || styleModel === void 0 ? void 0 : styleModel.mainTableStyleModel) === null || _b === void 0 ? void 0 : _b.caption), children: caption })), _jsx("thead", { className: classNames((_c = styleModel === null || styleModel === void 0 ? void 0 : styleModel.mainTableStyleModel) === null || _c === void 0 ? void 0 : _c.thead), children: _jsxs("tr", { "aria-rowindex": 1, className: classNames((_d = styleModel === null || styleModel === void 0 ? void 0 : styleModel.mainTableStyleModel) === null || _d === void 0 ? void 0 : _d.theadTr, (classes === null || classes === void 0 ? void 0 : classes.headerRow) || []), children: [prefixHeader, showSelectCol && (_jsx(SelectAllHeaderCell, { style: getWidthStyle(selectModel === null || selectModel === void 0 ? void 0 : selectModel.selectColWidth), selectionInfo: selectionInfo, onClick: selectAllOnClick, totalRows: rows.length, customClasses: (_e = styleModel === null || styleModel === void 0 ? void 0 : styleModel.mainTableStyleModel) === null || _e === void 0 ? void 0 : _e.rowSelectColTh, colIndexOffset: prefixHeader ? 1 : 0 })), colHeaderCells, editModel && (_jsx("th", { "aria-colindex": cols.length + 1 + (showSelectCol ? 1 : 0), className: classNames((_f = styleModel === null || styleModel === void 0 ? void 0 : styleModel.mainTableStyleModel) === null || _f === void 0 ? void 0 : _f.editColTh), style: getWidthStyle(editModel === null || editModel === void 0 ? void 0 : editModel.editColWidth), children: "Edit Controls" }))] }) }), _jsx("tbody", { className: classNames(classNames((_g = styleModel === null || styleModel === void 0 ? void 0 : styleModel.mainTableStyleModel) === null || _g === void 0 ? void 0 : _g.tbody)), children: bodyRows })] }));
+    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 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,15 +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 useUnwrappedGridStyles from "./pipeline/useUnwrappedGridStyles";
-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,13 +20,8 @@ const Grid = (props) => {
     });
     const { sortedRowsOutput: { sortColDef, setSortColDef, sortingEnabled }, showSelectCol, displayRows, } = combinedPipelineOutput;
     const gridSelectionFns = useGridSelectionFns(selectModel, rows);
-    const unwrappedStyles = useUnwrappedGridStyles(styleModel);
     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;
@@ -42,11 +36,10 @@ const Grid = (props) => {
         return (_jsx(ColHeaderCell, { label: label, sortModel: colSortModel, ariaColIndex: index + 1 + (showSelectCol ? 1 : 0), additionalClasses: ((_a = styleModel === null || styleModel === void 0 ? void 0 : styleModel.mainTableStyleModel) === null || _a === void 0 ? void 0 : _a.theadTh) &&
                 styleModel.mainTableStyleModel.theadTh(index), width: width }, name));
     });
-    const bodyRows = (_jsx(BodyRows, { augFormattedRows: augFormattedRows, gridSelectionFns: gridSelectionFns, selectModel: selectModel, unwrappedStyles: unwrappedStyles, combinedPipelineOutput: combinedPipelineOutput, editModel: editModel, getInputStrSubmitCallback: getInputStrSubmitCallback }));
-    return (_jsx(InternalGrid, { gridProps: props, hooks: {
+    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(InternalTable, { gridProps: props, hooks: {
             pipelineOutput: combinedPipelineOutput,
             selectFns: gridSelectionFns,
-            unwrappedStyles,
         }, slots: { colHeaderCells, bodyRows } }));
 };
-export default Grid;
+export default Table;

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

@@ -6,11 +6,11 @@ export interface EditControlsCellProps {
     isEditing: boolean;
     saveCallback: () => void;
     deleteCallback?: () => void;
-    editControlsCellClasses: string[];
-    saveButtonClasses: string[];
-    deleteButtonClasses: string[];
-    startButtonClasses: string[];
-    cancelButtonClasses: string[];
+    editControlsCellClasses: string[] | null;
+    saveButtonClasses: string[] | null;
+    deleteButtonClasses: string[] | null;
+    startButtonClasses: string[] | null;
+    cancelButtonClasses: string[] | null;
     style?: CSSProperties;
 }
 declare const EditControlsCell: FC<EditControlsCellProps>;

package/table/editing/EditControlsCell.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import classNames from "classnames";
+const stopPropagationWrapper = (fn) => (event) => {
+    event.stopPropagation();
+    fn();
+};
+const EditControlsCell = ({ ariaColIndex, beginEditingCallback, cancelEditingCallback, isEditing, saveCallback, deleteCallback, editControlsCellClasses, saveButtonClasses, deleteButtonClasses, startButtonClasses, cancelButtonClasses, }) => {
+    return (_jsx("td", { "aria-colindex": ariaColIndex, className: classNames(editControlsCellClasses), children: _jsx("div", { className: "hstack gap-2", children: isEditing ? (_jsxs(_Fragment, { children: [_jsx("button", { "aria-label": "Cancel", className: classNames(cancelButtonClasses || ["btn", "btn-secondary"]), onClick: stopPropagationWrapper(cancelEditingCallback), title: "Cancel", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", viewBox: "0 0 16 16", children: _jsx("path", { d: "M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293z" }) }) }), _jsx("button", { "aria-label": "Save", className: classNames(saveButtonClasses || ["btn", "btn-primary"]), onClick: stopPropagationWrapper(saveCallback), title: "Save", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", viewBox: "0 0 16 16", children: [_jsx("path", { d: "M12 2h-2v3h2z" }), _jsx("path", { d: "M1.5 0A1.5 1.5 0 0 0 0 1.5v13A1.5 1.5 0 0 0 1.5 16h13a1.5 1.5 0 0 0 1.5-1.5V2.914a1.5 1.5 0 0 0-.44-1.06L14.147.439A1.5 1.5 0 0 0 13.086 0zM4 6a1 1 0 0 1-1-1V1h10v4a1 1 0 0 1-1 1zM3 9h10a1 1 0 0 1 1 1v5H2v-5a1 1 0 0 1 1-1" })] }) })] })) : (_jsxs(_Fragment, { children: [deleteCallback && (_jsx("button", { "aria-label": "Delete", className: classNames(deleteButtonClasses || ["btn", "btn-secondary"]), onClick: stopPropagationWrapper(deleteCallback), title: "Delete", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", viewBox: "0 0 16 16", children: _jsx("path", { d: "M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5M8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5m3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0" }) }) })), _jsx("button", { "aria-label": "Edit", className: classNames(startButtonClasses || ["btn", "btn-primary"]), onClick: stopPropagationWrapper(beginEditingCallback), title: "Edit", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", viewBox: "0 0 16 16", children: [_jsx("path", { d: "M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z" }), _jsx("path", { fillRule: "evenodd", d: "M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5z" })] }) })] })) }) }));
+};
+export default EditControlsCell;

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;
@@ -9,13 +8,13 @@ export type EditableRowProps = Pick<React.ComponentProps<"tr">, "onClick" | "cla
     cellData: CellData[];
     updateCallback?: (values: string[]) => void;
     deleteCallback?: () => void;
-    dataCellClasses: (colIndex: number) => string[];
-    dataCellInputClasses: (colIndex: number) => string[];
-    editCellClasses: string[];
-    deleteButtonClasses: string[];
-    cancelButtonClasses: string[];
-    startButtonClasses: string[];
-    saveButtonClasses: string[];
+    dataCellClasses: (colIndex: number) => string[] | null;
+    dataCellInputClasses: (colIndex: number) => string[] | null;
+    editCellClasses: string[] | null;
+    deleteButtonClasses: string[] | null;
+    cancelButtonClasses: string[] | null;
+    startButtonClasses: string[] | null;
+    saveButtonClasses: string[] | null;
     editControlCellStyles?: CSSProperties;
 };
 declare const EditableRow: FC<EditableRowProps>;

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":
@@ -57,6 +57,6 @@ const EditableRow = ({ ariaColIndexOffset, cellData, children, updateCallback, d
             setIsEditing(false);
         }
     };
-    return (_jsxs("tr", { ref: trRef, onClick: onClick, className: className, "aria-rowindex": ariaRowIndex, "aria-selected": ariaSelected, "data-rowid": dataRowId, children: [children, cellData.map(({ type, value, formattedValue, label, width }, index) => (_jsx("td", { "aria-colindex": index + ariaColIndexOffset + 1, className: classNames(dataCellClasses(index)), style: getWidthStyle(width), children: isEditing && !!updateCallback ? (_jsx("input", { "aria-label": label, name: `editable-cell-input-${dataRowId}-${index}`, className: classNames("form-control", dataCellInputClasses(index)), type: colDataTypeToInputType(type), defaultValue: initValueToFormValue(value, type), required: type !== "string" })) : (formattedValue) }, index))), updateCallback && (_jsx(EditControlsCell, { ariaColIndex: ariaColIndexOffset + cellData.length + 1, beginEditingCallback: () => setIsEditing(true), cancelEditingCallback: () => setIsEditing(false), isEditing: isEditing, saveCallback: handleSave, deleteCallback: deleteCallback, editControlsCellClasses: editCellClasses, startButtonClasses: startButtonClasses, deleteButtonClasses: deleteButtonClasses, cancelButtonClasses: cancelButtonClasses, saveButtonClasses: saveButtonClasses, style: editControlCellStyles }))] }));
+    return (_jsxs("tr", { ref: trRef, onClick: onClick, className: className, "aria-rowindex": ariaRowIndex, "aria-selected": ariaSelected, "data-rowid": dataRowId, children: [children, cellData.map(({ type, value, formattedValue, label, width }, index) => (_jsx("td", { "aria-colindex": index + ariaColIndexOffset + 1, className: classNames(dataCellClasses(index)), style: getWidthStyle(width), children: isEditing && !!updateCallback ? (_jsx("input", { "aria-label": label, name: `editable-cell-input-${dataRowId}-${index}`, className: classNames(dataCellInputClasses(index) || "form-control"), type: colDataTypeToInputType(type), defaultValue: initValueToFormValue(value, type), required: type !== "string" })) : (formattedValue) }, index))), updateCallback && (_jsx(EditControlsCell, { ariaColIndex: ariaColIndexOffset + cellData.length + 1, beginEditingCallback: () => setIsEditing(true), cancelEditingCallback: () => setIsEditing(false), isEditing: isEditing, saveCallback: handleSave, deleteCallback: deleteCallback, editControlsCellClasses: editCellClasses, startButtonClasses: startButtonClasses, deleteButtonClasses: deleteButtonClasses, cancelButtonClasses: cancelButtonClasses, saveButtonClasses: saveButtonClasses, style: editControlCellStyles }))] }));
 };
 export default EditableRow;

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/table/main/BodyRows.d.ts

@@ -0,0 +1,22 @@
+import { FC, ReactNode } from "react";
+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;
+    tableStyleModel: TableStyleModel | undefined;
+    combinedPipelineOutput: UseCombinedPipelineHook;
+    selectModel: SelectModel | undefined;
+    editModel: EditModel | undefined;
+    getInputStrSubmitCallback: UseGetInputStrSubmitCallbackHook;
+    additionalColIndexOffset?: number;
+    renderPrefixCells?: (augFormattedRows: FormattedRow) => ReactNode;
+    additionalRowStyles?: (rowId: RowId, displayIndex: number) => string[];
+}
+declare const BodyRows: FC<BodyRowsProps>;
+export default BodyRows;

package/table/main/BodyRows.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import EditableRow from "../editing/EditableRow";
+import classNames from "classnames";
+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({
+            "table-active": selectedSet.has(row.id),
+        }, (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.tbodyTr) && (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.tbodyTr(row.id, index)), additionalRowStyles ? additionalRowStyles(row.id, index) : []), "aria-rowindex": row.prePaginationIndex + 2, dataRowId: row.id, "aria-selected": getAriaSelectedValue(row.id), ariaColIndexOffset: ariaColIndexOffset + (additionalColIndexOffset || 0), cellData: row.contents, updateCallback: getInputStrSubmitCallback && getInputStrSubmitCallback(row.id), deleteCallback: (editModel === null || editModel === void 0 ? void 0 : editModel.getDeleteCallback) && editModel.getDeleteCallback(row.id), dataCellClasses: (colIndex) => (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.tbodyTd)
+            ? tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.tbodyTd(row.id, index, colIndex)
+            : null, dataCellInputClasses: (colIndex) => (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.tbodyTdInput)
+            ? tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.tbodyTdInput(row.id, index, colIndex)
+            : null, editCellClasses: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.editColTd)
+            ? tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.editColTd(row.id, index)
+            : null, saveButtonClasses: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.editSaveButton)
+            ? tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.editSaveButton(row.id, index)
+            : null, deleteButtonClasses: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.editDeleteButton)
+            ? tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.editDeleteButton(row.id, index)
+            : null, startButtonClasses: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.editStartButton)
+            ? tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.editStartButton(row.id, index)
+            : null, cancelButtonClasses: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.editCancelButton)
+            ? tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.editCancelButton(row.id, index)
+            : null, children: [renderPrefixCells && renderPrefixCells(row), showSelectCol && (_jsx("td", { className: classNames((tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.rowSelectColTd) &&
+                    (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.rowSelectColTd(row.id, index))), "aria-colindex": 1 + (additionalColIndexOffset || 0), style: getWidthStyle(selectModel.selectColWidth), children: _jsx(SelectionInput, { index: index, selected: selectedSet.has(row.id), selectionInputModel: getSelectInputModel(row.id, selectModel), selectCallback: getSelectHandler(row.id), additionalClasses: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.rowSelectInput) &&
+                        (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.rowSelectInput(row.id, index)) }) }))] }, row.id));
+});
+export default BodyRows;

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,10 +1,10 @@
 import { CSSProperties, FC } from "react";
-import { SelectionInfo } from "./types";
+import { SelectionInfo } from "../../common/selection/types";
 interface SelectAllHeaderCellProps {
     onClick: () => void;
     selectionInfo: SelectionInfo;
     totalRows: number;
-    additionalClasses?: string[];
+    customClasses?: string[];
     style?: CSSProperties;
     colIndexOffset?: number;
 }

package/{grid → table}/selection/SelectAllHeaderCell.js

@@ -40,15 +40,13 @@ const getCheckboxState = (selectionInfo, noRows) => {
     // single select mode and none selected
     return disabledState;
 };
-const SelectAllHeaderCell = ({ onClick, selectionInfo, totalRows, additionalClasses, style, colIndexOffset, }) => {
+const SelectAllHeaderCell = ({ onClick, selectionInfo, totalRows, customClasses, style, colIndexOffset, }) => {
     const noRows = totalRows === 0;
     const { indeterminate, checked, disabled, description } = getCheckboxState(selectionInfo, noRows);
     const ref = useRef(null);
     useEffect(() => {
         ref.current.indeterminate = indeterminate;
     }, [indeterminate]);
-    return (_jsx("th", { style: style, "aria-colindex": 1 + (colIndexOffset || 0), title: description, "aria-description": description, className: classNames({
-            "btn-primary": !additionalClasses || additionalClasses.length === 0,
-        }, additionalClasses || []), children: _jsx("input", { tabIndex: 0, type: "checkbox", checked: checked, ref: ref, disabled: disabled, "aria-label": description, onChange: onClick }) }));
+    return (_jsx("th", { style: style, "aria-colindex": 1 + (colIndexOffset || 0), title: description, "aria-description": description, className: classNames(customClasses || "btn-primary"), children: _jsx("input", { tabIndex: 0, type: "checkbox", checked: checked, ref: ref, disabled: disabled, "aria-label": description, onChange: onClick }) }));
 };
 export default SelectAllHeaderCell;

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

@@ -13,7 +13,7 @@ export interface SelectionInputProps {
     selected: boolean;
     selectionInputModel: SelectionInputModel;
     selectCallback: () => void;
-    additionalClasses?: string[];
+    additionalClasses?: string[] | null;
     index: number;
 }
 declare const SelectionInput: FC<SelectionInputProps>;

package/table/style.scss

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

package/table/styling/types.d.ts

@@ -0,0 +1,41 @@
+import { RowId } from "../../common/types";
+export interface SharedTableStyleModel {
+    table?: string[];
+    tbody?: string[];
+    thead?: string[];
+    theadTr?: string[];
+    theadTh?: (colIndex: number) => string[] | null;
+    caption?: string[];
+}
+export type TableStyleModel = SharedTableStyleModel & {
+    tbodyTr?: (rowId: RowId, displayIndex: number) => string[] | null;
+    tbodyTd?: (rowId: RowId, displayRowIndex: number, colIndex: number) => string[] | null;
+    tbodyTdInput?: (rowId: RowId, displayRowIndex: number, colIndex: number) => string[] | null;
+    editColTh?: string[];
+    editColTd?: (rowId: RowId, displayIndex: number) => string[] | null;
+    editStartButton?: (rowId: RowId, displayIndex: number) => string[] | null;
+    editDeleteButton?: (rowId: RowId, displayIndex: number) => string[] | null;
+    editSaveButton?: (rowId: RowId, displayIndex: number) => string[] | null;
+    editCancelButton?: (rowId: RowId, displayIndex: number) => string[] | null;
+    rowSelectColTh?: string[];
+    rowSelectColTd?: (rowId: RowId, displayIndex: number) => string[] | null;
+    rowSelectInput?: (rowId: RowId, displayIndex: number) => string[] | null;
+};
+export type FilterInputTableStyleModel = SharedTableStyleModel & {
+    tbodyTr?: (rowIndex: number) => string[] | null;
+    tbodyTd?: (rowIndex: number, colIndex: number) => string[] | null;
+    enablementInput?: (rowIndex: number) => string[] | null;
+    schemeSelectionInput?: (rowIndex: number) => string[] | null;
+    searchStringInput?: (rowIndex: number) => string[] | null;
+    numberInput?: (rowIndex: number) => string[] | null;
+    startDateInput?: (rowIndex: number) => string[] | null;
+    endDateInput?: (rowIndex: number) => string[] | null;
+    submitButton?: string[];
+    form?: string[];
+};
+export interface AdditionalComponentsStyleModel {
+    topLevelDiv?: string[];
+    tableAndPaginationDiv?: string[];
+    tableDiv?: string[];
+    paginationUiDiv?: string[];
+}

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,21 +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 useUnwrappedGridStyles from "../grid/pipeline/useUnwrappedGridStyles";
-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,
@@ -27,7 +26,6 @@ const GridPro = (props) => {
     });
     const { sortedRowsOutput: { sortColDef, setSortColDef, sortingEnabled }, showSelectCol, displayRows, filterState, } = combinedPipelineOutput;
     const gridSelectionFns = useGridSelectionFns(selectModel, rows);
-    const unwrappedStyles = useUnwrappedGridStyles(styleModel);
     const getInputStrSubmitCallback = useGetInputStrSubmitCallback(editModel, cols);
     const resizeModel = useResizeModel(cols, displayMode);
     const colNameToWidth = useMemo(() => Object.keys(resizeModel).reduce((prev, fieldName) => {
@@ -117,14 +115,13 @@ const GridPro = (props) => {
         setDragee,
         sortingOccurring,
     ]);
-    const bodyRows = (_jsx(BodyRows, { augFormattedRows: augFormattedRows, gridSelectionFns: gridSelectionFns, selectModel: selectModel, unwrappedStyles: unwrappedStyles, combinedPipelineOutput: combinedPipelineOutput, editModel: editModel, getInputStrSubmitCallback: getInputStrSubmitCallback, renderPrefixCells: renderPrefixCells, additionalColIndexOffset: reorder ? 1 : 0, additionalRowStyles: additionalBodyRowStyles }));
+    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,
-            unwrappedStyles,
         }, 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;

package/table-pro/style.scss

@@ -0,0 +1,69 @@
+@use "../table/style";
+
+.rbdg-draggable-container {
+  width: 1rem;
+  height: 1rem;
+  touch-action: none;
+}
+
+.rbdg-draggable-icon {
+  pointer-events: none;
+}
+
+.rbdg-resize-container {
+  cursor: col-resize;
+}
+
+.rbdg-reorder-container {
+  cursor: grab !important;
+
+  &:active {
+    cursor: grabbing !important;
+  }
+}
+
+// Typical button reset to make it look like a plain div
+.rbdg-plain-icon-button {
+  display: inline-flex;
+  padding: 0;
+  margin: 0;
+  border: none;
+
+  background: none;
+  color: inherit;
+  font: inherit;
+
+  -webkit-appearance: none;
+  appearance: none;
+
+  &:disabled {
+    pointer-events: none;
+    opacity: 0.65;
+  }
+}
+
+.rbdg-drag-ghost {
+  opacity: 75%;
+  position: fixed;
+  padding: 0.5rem;
+  z-index: 2; // float above toolbar panels
+}
+
+.rbdg-reorder-dragged-row-pred {
+  border-bottom-color: var(--bs-success);
+}
+
+.rbdg-reorder-dragged-row {
+  border-top-width: 1px;
+  opacity: 50%;
+  border-color: var(--bs-success);
+}
+
+.rbdg-reorder-above-drag-target-row {
+  border-bottom-color: var(--bs-primary);
+}
+
+.rbdg-reorder-below-drag-target-row {
+  border-top-width: 1px;
+  border-top-color: var(--bs-primary);
+}