@absreim/react-bootstrap-data-grid 2.3.0 → 2.4.1

package/main/ColHeaderCell/useSortHeaderStates.js

@@ -0,0 +1,54 @@
+import useControlledHover from "../../util/useControlledHover";
+import { useMemo } from "react";
+import upArrow from "../../sorting/upArrow";
+import arrowPlaceholder from "../../sorting/arrowPlaceholder";
+import downArrow from "../../sorting/downArrow";
+var useSortHeaderStates = function (sortModel) {
+    var _a = useControlledHover(), isHovering = _a.isHovering, setIsHovering = _a.setIsHovering, handleMouseOver = _a.handleMouseOver, handleMouseOut = _a.handleMouseOut;
+    var handleClick = function () {
+        if (!sortModel) {
+            return;
+        }
+        switch (sortModel.sortOrder) {
+            case null: {
+                sortModel.setSortOrder("asc");
+                return;
+            }
+            case "asc": {
+                sortModel.setSortOrder("desc");
+                return;
+            }
+            case "desc": {
+                sortModel.setSortOrder(null);
+            }
+        }
+    };
+    var sortSymbol = useMemo(function () {
+        if (!sortModel) {
+            return null;
+        }
+        switch (sortModel.sortOrder) {
+            case null: {
+                if (isHovering) {
+                    return upArrow(true);
+                }
+                return arrowPlaceholder;
+            }
+            case "asc": {
+                return upArrow(false);
+            }
+            case "desc": {
+                return downArrow;
+            }
+        }
+    }, [isHovering, sortModel]);
+    return {
+        isHovering: isHovering,
+        setIsHovering: setIsHovering,
+        handleMouseOver: handleMouseOver,
+        handleMouseOut: handleMouseOut,
+        handleClick: handleClick,
+        sortSymbol: sortSymbol,
+    };
+};
+export default useSortHeaderStates;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@absreim/react-bootstrap-data-grid",
   "description": "Data grid UI component for use with web apps using React and Bootstrap",
-  "version": "2.3.0",
+  "version": "2.4.1",
   "license": "MIT",
   "author": "Brook Li",
   "homepage": "https://react-bootstrap-data-grid.vercel.app/",
@@ -29,6 +29,6 @@
   "repository": {
     "type": "git",
     "url": "git+https://github.com/absreim/react-bootstrap-data-grid.git",
-    "directory": "grid"
+    "directory": "src/grid"
   }
 }

package/pipeline/types.d.ts

@@ -0,0 +1 @@
+export type ColNameToWidth<ColName extends string = string> = Record<ColName, number | undefined>;

package/pipeline/types.js

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

package/pipeline/useAugFormattedRows.d.ts

@@ -0,0 +1,4 @@
+import { AugFormattedRow, FormattedRow } from "../types";
+import { ColNameToWidth } from "./types";
+declare const useAugFormattedRows: (colNameToWidth: ColNameToWidth, rows: FormattedRow[]) => AugFormattedRow[];
+export default useAugFormattedRows;

package/pipeline/useAugFormattedRows.js

@@ -0,0 +1,22 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { useMemo } from "react";
+var useAugFormattedRows = function (colNameToWidth, rows) {
+    return useMemo(function () {
+        return rows.map(function (row) {
+            return __assign(__assign({}, row), { contents: row.contents.map(function (cell) {
+                    return __assign(__assign({}, cell), { width: colNameToWidth[cell.fieldName] });
+                }) });
+        });
+    }, [colNameToWidth, rows]);
+};
+export default useAugFormattedRows;

package/pipeline/useCombinedPipeline/index.d.ts

@@ -0,0 +1,19 @@
+import { SortedRowsOutput } from "./useSortedRows";
+import { CurrentPageRowsOutput } from "./useCurrentPageRows";
+import { ColDefBase, FormattedRow, GridProps, RowDef } from "../../types";
+import { NormalizedTableFilterModel, TableFilterState } from "../../filtering/types";
+export type CombinedPipelineParams = Pick<GridProps, "rows" | "filterModel" | "sortModel" | "pagination" | "selectModel"> & {
+    cols: ColDefBase[];
+};
+export interface UseCombinedPipelineHook {
+    normalizedTableFilterModel: NormalizedTableFilterModel | null;
+    filteredRows: RowDef[];
+    filterState: TableFilterState | null;
+    sortedRowsOutput: SortedRowsOutput;
+    currentPageRowsOutput: CurrentPageRowsOutput;
+    showSelectCol: boolean;
+    ariaColIndexOffset: number;
+    displayRows: FormattedRow[];
+}
+declare const UseCombinedPipeline: (params: CombinedPipelineParams) => UseCombinedPipelineHook;
+export default UseCombinedPipeline;

package/pipeline/useCombinedPipeline/index.js

@@ -0,0 +1,31 @@
+import useFilterStateStore from "./useFilterStateStore";
+import useFilter from "./useFilter";
+import useFilterStateFromEditable from "./useFilterStateFromEditable";
+import useSortedRows from "./useSortedRows";
+import useCurrentPageRows from "./useCurrentPageRows";
+import useDisplayRows from "./useDisplayRows";
+var UseCombinedPipeline = function (_a) {
+    var filterModel = _a.filterModel, cols = _a.cols, rows = _a.rows, sortModel = _a.sortModel, pagination = _a.pagination, selectModel = _a.selectModel;
+    var normalizedTableFilterModel = useFilterStateStore(filterModel, cols);
+    var editableFilterState = (normalizedTableFilterModel === null || normalizedTableFilterModel === void 0 ? void 0 : normalizedTableFilterModel.tableFilterState) || null;
+    var filteredRows = useFilter(rows, editableFilterState);
+    var filterState = useFilterStateFromEditable(cols, editableFilterState);
+    var sortedRowsOutput = useSortedRows(filteredRows, cols, sortModel);
+    var sortedRows = sortedRowsOutput.sortedRows;
+    var currentPageRowsOutput = useCurrentPageRows(sortedRows, pagination);
+    var showSelectCol = !!(selectModel && selectModel.mode !== "row");
+    var ariaColIndexOffset = showSelectCol ? 1 : 0;
+    var paginatedRows = currentPageRowsOutput.paginatedRows;
+    var displayRows = useDisplayRows(paginatedRows, cols, ariaColIndexOffset);
+    return {
+        normalizedTableFilterModel: normalizedTableFilterModel,
+        filteredRows: filteredRows,
+        filterState: filterState,
+        sortedRowsOutput: sortedRowsOutput,
+        currentPageRowsOutput: currentPageRowsOutput,
+        showSelectCol: showSelectCol,
+        ariaColIndexOffset: ariaColIndexOffset,
+        displayRows: displayRows,
+    };
+};
+export default UseCombinedPipeline;

package/pipeline/{useCurrentPageRows.d.ts → useCombinedPipeline/useCurrentPageRows.d.ts}

@@ -1,7 +1,8 @@
-import { RowDef } from "../types";
-import { NormalizedPaginationModel, GridPaginationState } from "../pagination/types";
-declare const useCurrentPageRows: (sortedRows: RowDef[], paginationModel: GridPaginationState | undefined) => {
+import { RowDef } from "../../types";
+import { NormalizedPaginationModel, GridPaginationState } from "../../pagination/types";
+export interface CurrentPageRowsOutput {
     paginatedRows: RowDef[];
     normalizedModel: NormalizedPaginationModel | null;
-};
+}
+declare const useCurrentPageRows: (sortedRows: RowDef[], paginationModel: GridPaginationState | undefined) => CurrentPageRowsOutput;
 export default useCurrentPageRows;

package/pipeline/{useDisplayRows.d.ts → useCombinedPipeline/useDisplayRows.d.ts}

@@ -1,3 +1,3 @@
-import { RowDef, FormattedRow, ColDef } from "../types";
+import { RowDef, FormattedRow, ColDef } from "../../types";
 declare const useDisplayRows: (currentPageRows: RowDef[], cols: ColDef[], ariaColIndexOffset: number) => FormattedRow[];
 export default useDisplayRows;

package/pipeline/{useDisplayRows.js → useCombinedPipeline/useDisplayRows.js}

@@ -1,5 +1,5 @@
 import { useMemo } from "react";
-import { dateToDatetimeInputStr, dateToInputStr } from "../util/datetime";
+import { dateToDatetimeInputStr, dateToInputStr } from "../../util/datetime";
 var getFormattedValue = function (value, formatter, typeString) {
     if (formatter) {
         return formatter(value);

package/pipeline/{useEditableFromFilterState.d.ts → useCombinedPipeline/useEditableFromFilterState.d.ts}

@@ -1,3 +1,3 @@
-import { EditableTableFilterState, TableFilterState } from "../filtering/types";
+import { EditableTableFilterState, TableFilterState } from "../../filtering/types";
 declare const useEditableFromFilterState: (filterState: TableFilterState | null) => EditableTableFilterState | null;
 export default useEditableFromFilterState;

package/pipeline/{useFilter.d.ts → useCombinedPipeline/useFilter.d.ts}

@@ -1,4 +1,4 @@
-import { RowDef } from "../types";
-import { EditableTableFilterState } from "../filtering/types";
+import { RowDef } from "../../types";
+import { EditableTableFilterState } from "../../filtering/types";
 declare const useFilter: (rows: RowDef[], filterState: EditableTableFilterState | null) => RowDef[];
 export default useFilter;

package/pipeline/{useFilterStateFromEditable.d.ts → useCombinedPipeline/useFilterStateFromEditable.d.ts}

@@ -1,4 +1,4 @@
-import { ColDef } from "../types";
-import { EditableTableFilterState, TableFilterState } from "../filtering/types";
+import { ColDef } from "../../types";
+import { EditableTableFilterState, TableFilterState } from "../../filtering/types";
 declare const useFilterStateFromEditable: (colDefs: ColDef[], editableFilterState: EditableTableFilterState | null) => TableFilterState | null;
 export default useFilterStateFromEditable;

package/pipeline/useCombinedPipeline/useFilterStateStore.d.ts

@@ -0,0 +1,4 @@
+import { FilterModel, NormalizedTableFilterModel } from "../../filtering/types";
+import { ColDefBase } from "../../types";
+declare const useFilterStateStore: (filterModel: FilterModel | undefined, cols: ColDefBase[]) => NormalizedTableFilterModel | null;
+export default useFilterStateStore;

package/pipeline/useCombinedPipeline/useSortedRows.d.ts

@@ -0,0 +1,10 @@
+import { ColDefBase, RowDef } from "../../types";
+import { SortColDef, TableSortModel } from "../../sorting/types";
+export interface SortedRowsOutput {
+    sortedRows: RowDef[];
+    sortingEnabled: boolean;
+    sortColDef: SortColDef | null | undefined;
+    setSortColDef: ((sortColDef: SortColDef | null) => void) | undefined;
+}
+declare const useSortedRows: (rows: RowDef[], cols: ColDefBase[], sortModel: TableSortModel | undefined) => SortedRowsOutput;
+export default useSortedRows;

package/pipeline/useGetInputStrSubmitCallback.d.ts

@@ -0,0 +1,5 @@
+import { ColDefBase, RowId } from "../types";
+import { EditModel } from "../editing/types";
+export type UseGetInputStrSubmitCallbackHook = ((id: RowId) => (inputStrs: string[]) => void) | undefined;
+declare const useGetInputStrSubmitCallback: (editModel: EditModel | undefined, cols: ColDefBase[]) => UseGetInputStrSubmitCallbackHook;
+export default useGetInputStrSubmitCallback;

package/pipeline/useGetInputStrSubmitCallback.js

@@ -0,0 +1,13 @@
+import inputStrsToRowData from "../editing/inputStrsToRowData";
+var useGetInputStrSubmitCallback = function (editModel, cols) {
+    var getInputStrSubmitCallback = editModel &&
+        (function (id) {
+            var idSpecificCallback = editModel.getUpdateCallback(id);
+            return function (inputStrs) {
+                var rowData = inputStrsToRowData(cols, inputStrs);
+                idSpecificCallback(rowData);
+            };
+        });
+    return getInputStrSubmitCallback;
+};
+export default useGetInputStrSubmitCallback;

package/pipeline/useGridSelectionFns.d.ts

@@ -0,0 +1,16 @@
+import { RowDef, RowId } from "../types";
+import { MouseEventHandler } from "react";
+import { SelectionInfo, SelectModel } from "../selection/types";
+import { SelectionInputModel } from "../selection/SelectionInput";
+export interface UseGridSelectionFnsHook {
+    selectedSet: Set<RowId>;
+    rowsAreSelectable: boolean | undefined;
+    selectionInfo: SelectionInfo | null;
+    selectAllOnClick: () => void;
+    getSelectHandler: (index: RowId) => () => void;
+    getSelectInputModel: (id: RowId, selectModel: SelectModel) => SelectionInputModel;
+    getRowClickHandler: (index: RowId) => MouseEventHandler<HTMLTableRowElement>;
+    getAriaSelectedValue: (id: RowId) => "true" | "false" | undefined;
+}
+declare const useGridSelectionFns: (selectModel: SelectModel | undefined, rows: RowDef[]) => UseGridSelectionFnsHook;
+export default useGridSelectionFns;

package/pipeline/useGridSelectionFns.js

@@ -0,0 +1,131 @@
+import { useCallback, useId, useMemo } from "react";
+import isSubset from "../util/isSubset";
+var useGridSelectionFns = function (selectModel, rows) {
+    var selectionExists = useMemo(function () {
+        if (!selectModel) {
+            return false;
+        }
+        if (selectModel.type === "single") {
+            return selectModel.selected !== null;
+        }
+        return selectModel.selected.length > 0;
+    }, [selectModel]);
+    var selectAllOnClick = useCallback(function () {
+        if (!selectModel) {
+            return;
+        }
+        if (selectionExists && selectModel.type === "single") {
+            selectModel.setSelected(null);
+            return;
+        }
+        if (selectionExists && selectModel.type === "multi") {
+            selectModel.setSelected([]);
+            return;
+        }
+        if (!selectionExists && selectModel.type === "multi") {
+            var allRowIndices = rows.map(function (_, index) { return index; });
+            selectModel.setSelected(allRowIndices);
+        }
+        // Button should be disabled in the case of selectionExists &&
+        // selectModel.type === "single", so function execution should never get
+        // to this point.
+    }, [rows, selectModel, selectionExists]);
+    var getSelectHandler = function (index) { return function () {
+        if (!selectModel) {
+            return;
+        }
+        if (selectModel.type === "single") {
+            selectModel.setSelected(index);
+            return;
+        }
+        selectModel.setSelected(selectModel.selected.concat(index));
+    }; };
+    var getDeselectHandler = function (index) { return function () {
+        if (!selectModel || selectModel.type === "single") {
+            return;
+        }
+        selectModel.setSelected(selectModel.selected.filter(function (num) { return num !== index; }));
+    }; };
+    // used to group radio buttons for selection
+    var gridId = useId();
+    var getSelectInputModel = function (id, selectModel) {
+        if (selectModel.type === "single") {
+            return {
+                type: "radio",
+                name: selectModel.groupName || gridId,
+            };
+        }
+        return {
+            type: "checkbox",
+            deselectCallback: getDeselectHandler(id),
+        };
+    };
+    var selectedSet = useMemo(function () {
+        var set = new Set();
+        if (selectModel && selectModel.type === "multi") {
+            selectModel.selected.forEach(function (value) { return set.add(value); });
+        }
+        if (selectModel &&
+            selectModel.type === "single" &&
+            selectModel.selected !== null) {
+            set.add(selectModel.selected);
+        }
+        return set;
+    }, [selectModel]);
+    var rowsAreSelectable = selectModel && selectModel.mode !== "column";
+    var selectionInfo = useMemo(function () {
+        if (!selectModel) {
+            return null;
+        }
+        if (selectModel.type === "single") {
+            return {
+                selectType: "single",
+                existingSelection: selectionExists,
+            };
+        }
+        var getMultiExistingSelection = function (selectionExists, rows) {
+            var rowIndices = rows.map(function (_, index) { return index; });
+            // Note that isFullSelection is true if there are no rows at all. In that case, the return value of this function
+            // should be "none", not "full".
+            var isFullSelection = isSubset(rowIndices, selectModel.selected);
+            if (!selectionExists) {
+                return "none";
+            }
+            if (isFullSelection) {
+                return "full";
+            }
+            return "partial";
+        };
+        return {
+            selectType: "multi",
+            existingSelection: getMultiExistingSelection(selectionExists, rows),
+        };
+    }, [selectModel, selectionExists, rows]);
+    var getRowClickHandler = function (index) { return function () {
+        if (!rowsAreSelectable) {
+            return;
+        }
+        if (selectedSet.has(index)) {
+            getDeselectHandler(index)();
+            return;
+        }
+        getSelectHandler(index)();
+    }; };
+    var getAriaSelectedValue = function (id) {
+        if (!selectModel) {
+            return undefined;
+        }
+        return String(selectedSet.has(id));
+    };
+    return {
+        selectedSet: selectedSet,
+        rowsAreSelectable: rowsAreSelectable,
+        selectionInfo: selectionInfo,
+        selectAllOnClick: selectAllOnClick,
+        getSelectHandler: getSelectHandler,
+        getSelectInputModel: getSelectInputModel,
+        getRowClickHandler: getRowClickHandler,
+        getAriaSelectedValue: getAriaSelectedValue,
+    };
+};
+export default useGridSelectionFns;

package/pipeline/useUnwrappedGridStyles.d.ts

@@ -0,0 +1,7 @@
+import { AdditionalComponentsStyleModel, StyleModel, TableStyleModel } from "../styling/types";
+export interface UseUnwrappedGridStylesHook {
+    unwrappedTableModel: Required<TableStyleModel>;
+    unwrappedAdditionalStyleModel: Required<AdditionalComponentsStyleModel>;
+}
+declare const UseUnwrappedGridStyles: (styleModel: StyleModel | undefined) => UseUnwrappedGridStylesHook;
+export default UseUnwrappedGridStyles;

package/pipeline/useUnwrappedGridStyles.js

@@ -0,0 +1,17 @@
+import { useMemo } from "react";
+import { unwrapAdditionalComponentsStyleModel, unwrapTableStyleModel, } from "../styling/styleModelUnwrappers";
+var UseUnwrappedGridStyles = function (styleModel) {
+    // To give the developer the ability to specify between removing existing styles
+    // and simply adding additional ones, we should migrate off of this "unwrapped"
+    // design over time and instead apply logic based on the original params that
+    // can be undefined.
+    var unwrappedTableModel = useMemo(function () { return unwrapTableStyleModel(styleModel === null || styleModel === void 0 ? void 0 : styleModel.mainTableStyleModel); }, [styleModel === null || styleModel === void 0 ? void 0 : styleModel.mainTableStyleModel]);
+    var unwrappedAdditionalStyleModel = useMemo(function () {
+        return unwrapAdditionalComponentsStyleModel(styleModel === null || styleModel === void 0 ? void 0 : styleModel.additionalComponentsStyleModel);
+    }, [styleModel === null || styleModel === void 0 ? void 0 : styleModel.additionalComponentsStyleModel]);
+    return {
+        unwrappedTableModel: unwrappedTableModel,
+        unwrappedAdditionalStyleModel: unwrappedAdditionalStyleModel,
+    };
+};
+export default UseUnwrappedGridStyles;

package/selection/SelectAllHeaderCell.d.ts

@@ -1,10 +1,11 @@
-import { FC } from "react";
+import { CSSProperties, FC } from "react";
 import { SelectionInfo } from "./types";
 interface SelectAllHeaderCellProps {
     onClick: () => void;
     selectionInfo: SelectionInfo;
     totalRows: number;
     additionalClasses?: string[];
+    style?: CSSProperties;
 }
 declare const SelectAllHeaderCell: FC<SelectAllHeaderCellProps>;
 export default SelectAllHeaderCell;

package/selection/SelectAllHeaderCell.js

@@ -41,14 +41,14 @@ var getCheckboxState = function (selectionInfo, noRows) {
     return disabledState;
 };
 var SelectAllHeaderCell = function (_a) {
-    var onClick = _a.onClick, selectionInfo = _a.selectionInfo, totalRows = _a.totalRows, additionalClasses = _a.additionalClasses;
+    var onClick = _a.onClick, selectionInfo = _a.selectionInfo, totalRows = _a.totalRows, additionalClasses = _a.additionalClasses, style = _a.style;
     var noRows = totalRows === 0;
     var _b = getCheckboxState(selectionInfo, noRows), indeterminate = _b.indeterminate, checked = _b.checked, disabled = _b.disabled, description = _b.description;
     var ref = useRef(null);
     useEffect(function () {
         ref.current.indeterminate = indeterminate;
     }, [indeterminate]);
-    return (_jsx("th", { "aria-colindex": 1, title: description, "aria-description": description, className: classNames({
+    return (_jsx("th", { style: style, "aria-colindex": 1, title: description, "aria-description": description, className: classNames({
             "btn-primary": !additionalClasses || additionalClasses.length === 0,
         }, additionalClasses || []), children: _jsx("input", { type: "checkbox", checked: checked, ref: ref, disabled: disabled, "aria-label": description, onChange: onClick }) }));
 };

package/selection/types.d.ts

@@ -1,19 +1,21 @@
 import { RowId } from "../types";
 export type SelectMode = "column" | "row" | "both";
 export type SelectType = "single" | "multi";
-export interface MultiSelectModel {
+interface BaseSelectModel {
     mode: SelectMode;
+    selectColWidth?: number;
+}
+export type MultiSelectModel = BaseSelectModel & {
     type: "multi";
     selected: RowId[];
     setSelected: (selected: RowId[]) => void;
-}
-export interface SingleSelectModel {
-    mode: SelectMode;
+};
+export type SingleSelectModel = BaseSelectModel & {
     type: "single";
     selected: RowId | null;
     setSelected: (selected: RowId | null) => void;
     groupName?: string;
-}
+};
 export type SelectModel = SingleSelectModel | MultiSelectModel;
 export type MultiExistingSelection = "full" | "partial" | "none";
 export interface SingleSelectionInfo {
@@ -25,3 +27,4 @@ export interface MultiSelectionInfo {
     existingSelection: "full" | "partial" | "none";
 }
 export type SelectionInfo = SingleSelectionInfo | MultiSelectionInfo;
+export {};

package/sorting/arrowPlaceholder.js

@@ -1,7 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Temporary solution to prevent column widths from changing when hovering over
 // columns with a mouse.
 // More ideal permanent solution would be to fix column widths based on preset
 // values.
-var arrowPlaceholder = (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", viewBox: "0 0 16 16", children: _jsx("desc", { children: "Empty transparent square for styling purposes" }) }));
+var arrowPlaceholder = (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", viewBox: "0 0 16 16", children: [_jsx("title", { children: "(not being sorted)" }), _jsx("desc", { children: "Empty transparent square for styling purposes" })] }));
 export default arrowPlaceholder;

package/style.css

@@ -1 +1 @@
-.rbdg-clickable-grid-header-cell{cursor:pointer}
+.rbdg-sort-toggler{cursor:pointer}

package/style.scss

@@ -1,3 +1,3 @@
-.rbdg-clickable-grid-header-cell {
+.rbdg-sort-toggler {
   cursor: pointer;
 }

package/types.d.ts

@@ -1,13 +1,21 @@
-import { CellData } from "./editing/types";
+import { CellData, EditModel } from "./editing/types";
+import { GridPaginationState } from "./pagination/types";
+import { ColSortModel, TableSortModel } from "./sorting/types";
+import { FilterModel } from "./filtering/types";
+import { SelectModel } from "./selection/types";
+import { StyleModel } from "./styling/types";
 export type ColDataType = string | number | Date;
 export type ColDataTypeStrings = "string" | "number" | "date" | "datetime";
-export interface ColDef<ValueType = any> {
+export interface ColDefBase<ValueType = any> {
     type: ColDataTypeStrings;
     name: string;
     label: string;
     formatter?: (value: ValueType) => string;
     sortable?: boolean;
 }
+export type ColDef<ValueType = any> = ColDefBase<ValueType> & {
+    width?: number;
+};
 type ValidRowData = Record<string, any>;
 export type RowData<Data extends ValidRowData = ValidRowData> = Data;
 export type RowId = string | number;
@@ -19,6 +27,37 @@ export interface FormattedRow {
     contents: CellData[];
     id: RowId;
 }
+export type AugCellData = CellData & {
+    width?: number;
+};
+export type AugFormattedRow = Omit<FormattedRow, "contents"> & {
+    contents: AugCellData[];
+};
 export type JustifyContentSetting = "start" | "end" | "center" | "between" | "around" | "evenly";
 export type Size = "small" | "medium" | "large";
+export type DisplayMode = "table" | "block";
+export interface GridProps {
+    rows: RowDef[];
+    cols: ColDef[];
+    pagination?: GridPaginationState;
+    sortModel?: TableSortModel;
+    filterModel?: FilterModel;
+    selectModel?: SelectModel;
+    editModel?: EditModel;
+    caption?: string;
+    styleModel?: StyleModel;
+    useToolbar?: boolean;
+    responsive?: boolean;
+    displayMode?: DisplayMode;
+}
+export type BaseGridProps = Omit<GridProps, "cols"> & {
+    cols: ColDefBase[];
+};
+export interface ColHeaderCellProps {
+    label: string;
+    sortModel?: ColSortModel;
+    ariaColIndex: number;
+    additionalClasses?: string[];
+    width?: number;
+}
 export {};

package/util/getWidthStyle.d.ts

@@ -0,0 +1,3 @@
+import { CSSProperties } from "react";
+declare const getWidthStyle: (width: number | undefined) => CSSProperties | undefined;
+export default getWidthStyle;

package/util/getWidthStyle.js

@@ -0,0 +1,9 @@
+var getWidthStyle = function (width) {
+    return width === undefined
+        ? undefined
+        : {
+            minWidth: width,
+            maxWidth: width,
+        };
+};
+export default getWidthStyle;

package/ColHeaderCell.d.ts

@@ -1,10 +0,0 @@
-import { FC } from "react";
-import { ColSortModel } from "./sorting/types";
-interface ColHeaderCellProps {
-    label: string;
-    sortModel?: ColSortModel;
-    ariaColIndex: number;
-    additionalClasses?: string[];
-}
-declare const ColHeaderCell: FC<ColHeaderCellProps>;
-export default ColHeaderCell;