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

package/Grid.d.ts

@@ -16,6 +16,8 @@ export interface GridProps {
     editModel?: EditModel;
     caption?: string;
     styleModel?: StyleModel;
+    useToolbar?: boolean;
+    responsive?: boolean;
 }
 declare const Grid: FC<GridProps>;
 export default Grid;

package/Grid.js

@@ -1,6 +1,6 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useState } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useId, useMemo, useState } from "react";
 import ColHeaderCell from "./ColHeaderCell";
 import useFilter from "./pipeline/useFilter";
 import ToggleButton from "./ToggleButton";
@@ -18,9 +18,12 @@ import { unwrapAdditionalComponentsStyleModel, unwrapTableStyleModel, } from "./
 import useCurrentPageRows from "./pipeline/useCurrentPageRows";
 import isSubset from "./util/isSubset";
 import useFilterStateStore from "./pipeline/useFilterStateStore";
+import useInterfaces from "./toolbar/useInterfaces";
+import ToolbarContainer from "./toolbar/ToolbarContainer";
+import useExportFn from "./export/useExportFn";
 var Grid = function (_a) {
     var _b;
-    var rows = _a.rows, cols = _a.cols, pagination = _a.pagination, sortModel = _a.sortModel, filterModel = _a.filterModel, selectModel = _a.selectModel, editModel = _a.editModel, caption = _a.caption, styleModel = _a.styleModel;
+    var rows = _a.rows, cols = _a.cols, pagination = _a.pagination, sortModel = _a.sortModel, filterModel = _a.filterModel, selectModel = _a.selectModel, editModel = _a.editModel, caption = _a.caption, styleModel = _a.styleModel, useToolbar = _a.useToolbar, responsive = _a.responsive;
     var normalizedTableFilterModel = useFilterStateStore(filterModel, cols);
     var editableFilterState = (normalizedTableFilterModel === null || normalizedTableFilterModel === void 0 ? void 0 : normalizedTableFilterModel.tableFilterState) || null;
     var filteredRows = useFilter(rows, editableFilterState);
@@ -31,6 +34,34 @@ var Grid = function (_a) {
     var ariaColIndexOffset = showSelectCol ? 1 : 0;
     var displayRows = useDisplayRows(paginatedRows, cols, ariaColIndexOffset);
     var _e = useState(false), filterOptionsVisible = _e[0], setFilterOptionsVisible = _e[1];
+    var exportFnInfo = useExportFn({
+        rows: rows,
+        cols: cols,
+        filteredRows: filterModel && filteredRows,
+        currentPageRows: pagination && paginatedRows,
+    });
+    var toolbarInterfaceParams = useMemo(function () { return ({
+        filtering: useToolbar && filterState && filterModel && normalizedTableFilterModel
+            ? {
+                filterState: filterState,
+                setFilterState: normalizedTableFilterModel.setTableFilterState,
+                caption: filterModel.filterTableCaption,
+                styleModel: styleModel === null || styleModel === void 0 ? void 0 : styleModel.filterInputTableStyleModel,
+            }
+            : undefined,
+        exporting: useToolbar
+            ? { exportFnInfo: exportFnInfo, styleModel: styleModel === null || styleModel === void 0 ? void 0 : styleModel.exportFormStyleModel }
+            : undefined,
+    }); }, [
+        exportFnInfo,
+        filterModel,
+        filterState,
+        normalizedTableFilterModel,
+        styleModel === null || styleModel === void 0 ? void 0 : styleModel.exportFormStyleModel,
+        styleModel === null || styleModel === void 0 ? void 0 : styleModel.filterInputTableStyleModel,
+        useToolbar,
+    ]);
+    var toolbarInterfaces = useInterfaces(toolbarInterfaceParams);
     var handleToggleFilterOptions = function () {
         setFilterOptionsVisible(!filterOptionsVisible);
     };
@@ -81,11 +112,12 @@ var Grid = function (_a) {
         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,
+                name: selectModel.groupName || gridId,
             };
         }
         return {
@@ -159,30 +191,29 @@ var Grid = function (_a) {
     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 (_jsxs("div", { "data-testid": "rbdg-top-level-div", className: classNames(unwrappedAdditionalStyleModel.topLevelDiv), children: [normalizedTableFilterModel && (_jsxs("div", { "data-testid": "rbdg-filter-inputs-div", className: classNames(unwrappedAdditionalStyleModel.filterInputsDiv), children: [_jsx(ToggleButton, { isActive: filterOptionsVisible, label: "".concat(filterOptionsVisible ? "Hide" : "Show ", " Filter Options"), onClick: handleToggleFilterOptions, classes: (_b = styleModel === null || styleModel === void 0 ? void 0 : styleModel.additionalComponentsStyleModel) === null || _b === void 0 ? void 0 : _b.filterUiToggleButton }), filterOptionsVisible && (_jsx(FilterOptionsTable, { caption: filterModel.filterTableCaption, filterState: filterState, setFilterState: normalizedTableFilterModel.setTableFilterState, styleModel: styleModel === null || styleModel === void 0 ? void 0 : styleModel.filterInputTableStyleModel }))] })), _jsxs("div", { "data-testid": "rbdg-table-and-pagination-div", className: classNames(unwrappedAdditionalStyleModel.tableAndPaginationDiv), children: [_jsxs("table", { className: classNames("table", {
-                            "table-hover": rowsAreSelectable,
-                        }, unwrappedTableModel.table), "aria-rowcount": filteredRows.length + 1, children: [caption !== undefined && (_jsx("caption", { className: classNames(unwrappedTableModel.caption), children: caption })), _jsx("thead", { className: classNames(unwrappedTableModel.thead), children: _jsxs("tr", { "aria-rowindex": 1, className: classNames(unwrappedTableModel.theadTr), children: [showSelectCol && (_jsx(SelectAllHeaderCell, { selectionInfo: selectionInfo, onClick: selectAllOnClick, totalRows: rows.length, additionalClasses: unwrappedTableModel.rowSelectColTh })), cols.map(function (_a, index) {
-                                            var name = _a.name, label = _a.label, sortable = _a.sortable;
-                                            var colSortModel = sortingEnabled && sortable
-                                                ? {
-                                                    sortOrder: (sortColDef === null || sortColDef === void 0 ? void 0 : sortColDef.name) === name ? sortColDef.order : null,
-                                                    setSortOrder: function (order) {
-                                                        setSortColDef &&
-                                                            setSortColDef(order && { name: name, order: order });
-                                                    },
-                                                }
-                                                : undefined;
-                                            return (_jsx(ColHeaderCell, { label: label, sortModel: colSortModel, ariaColIndex: index + 1 + (showSelectCol ? 1 : 0), additionalClasses: unwrappedTableModel.theadTh(index) }, name));
-                                        }), editModel && (_jsx("th", { "aria-colindex": cols.length + 1 + (showSelectCol ? 1 : 0), className: classNames(unwrappedTableModel.editColTh), children: "Edit Controls" }))] }) }), _jsx("tbody", { className: classNames(unwrappedTableModel.tbody), children: displayRows.map(function (row, index) {
-                                    return (_jsx(EditableRow, { onClick: getRowClickHandler(row.id), className: classNames({
-                                            "table-active": selectedSet.has(row.id),
-                                        }, unwrappedTableModel.tbodyTr(row.id, index)), "aria-rowindex": index + 2, dataRowId: row.id, "aria-selected": getAriaSelectedValue(row.id), ariaColIndexOffset: ariaColIndexOffset, cellData: row.contents, updateCallback: getInputStrSubmitCallback &&
-                                            getInputStrSubmitCallback(row.id), deleteCallback: (editModel === null || editModel === void 0 ? void 0 : editModel.getDeleteCallback) &&
-                                            editModel.getDeleteCallback(row.id), dataCellClasses: function (colIndex) {
-                                            return unwrappedTableModel.tbodyTd(row.id, index, colIndex);
-                                        }, dataCellInputClasses: function (colIndex) {
-                                            return unwrappedTableModel.tbodyTdInput(row.id, index, colIndex);
-                                        }, editCellClasses: unwrappedTableModel.editColTd(row.id, index), saveButtonClasses: unwrappedTableModel.editSaveButton(row.id, index), deleteButtonClasses: unwrappedTableModel.editDeleteButton(row.id, index), startButtonClasses: unwrappedTableModel.editStartButton(row.id, index), cancelButtonClasses: unwrappedTableModel.editCancelButton(row.id, index), children: showSelectCol && (_jsx("td", { className: classNames(unwrappedTableModel.rowSelectColTd(row.id, index)), "aria-colindex": 1, children: _jsx(SelectionInput, { selected: selectedSet.has(row.id), selectionInputModel: getSelectInputModel(row.id, selectModel), selectCallback: getSelectHandler(row.id), additionalClasses: unwrappedTableModel.rowSelectInput(row.id, index) }) })) }, row.id));
-                                }) })] }), normalizedModel && (_jsx(Pagination, { normalizedModel: normalizedModel, prePagingNumRows: sortedRows.length }))] })] }));
+    var mainTable = (_jsxs("table", { className: classNames("table", {
+            "table-hover": rowsAreSelectable,
+        }, unwrappedTableModel.table), "aria-rowcount": filteredRows.length + 1, children: [caption !== undefined && (_jsx("caption", { className: classNames(unwrappedTableModel.caption), children: caption })), _jsx("thead", { className: classNames(unwrappedTableModel.thead), children: _jsxs("tr", { "aria-rowindex": 1, className: classNames(unwrappedTableModel.theadTr), children: [showSelectCol && (_jsx(SelectAllHeaderCell, { selectionInfo: selectionInfo, onClick: selectAllOnClick, totalRows: rows.length, additionalClasses: unwrappedTableModel.rowSelectColTh })), cols.map(function (_a, index) {
+                            var name = _a.name, label = _a.label, sortable = _a.sortable;
+                            var colSortModel = sortingEnabled && sortable
+                                ? {
+                                    sortOrder: (sortColDef === null || sortColDef === void 0 ? void 0 : sortColDef.name) === name ? sortColDef.order : null,
+                                    setSortOrder: function (order) {
+                                        setSortColDef && setSortColDef(order && { name: name, order: order });
+                                    },
+                                }
+                                : undefined;
+                            return (_jsx(ColHeaderCell, { label: label, sortModel: colSortModel, ariaColIndex: index + 1 + (showSelectCol ? 1 : 0), additionalClasses: unwrappedTableModel.theadTh(index) }, name));
+                        }), editModel && (_jsx("th", { "aria-colindex": cols.length + 1 + (showSelectCol ? 1 : 0), className: classNames(unwrappedTableModel.editColTh), children: "Edit Controls" }))] }) }), _jsx("tbody", { className: classNames(unwrappedTableModel.tbody), children: displayRows.map(function (row, index) {
+                    return (_jsx(EditableRow, { onClick: getRowClickHandler(row.id), className: classNames({
+                            "table-active": selectedSet.has(row.id),
+                        }, unwrappedTableModel.tbodyTr(row.id, index)), "aria-rowindex": index + 2, dataRowId: row.id, "aria-selected": getAriaSelectedValue(row.id), ariaColIndexOffset: ariaColIndexOffset, cellData: row.contents, updateCallback: getInputStrSubmitCallback && getInputStrSubmitCallback(row.id), deleteCallback: (editModel === null || editModel === void 0 ? void 0 : editModel.getDeleteCallback) &&
+                            editModel.getDeleteCallback(row.id), dataCellClasses: function (colIndex) {
+                            return unwrappedTableModel.tbodyTd(row.id, index, colIndex);
+                        }, dataCellInputClasses: function (colIndex) {
+                            return unwrappedTableModel.tbodyTdInput(row.id, index, colIndex);
+                        }, editCellClasses: unwrappedTableModel.editColTd(row.id, index), saveButtonClasses: unwrappedTableModel.editSaveButton(row.id, index), deleteButtonClasses: unwrappedTableModel.editDeleteButton(row.id, index), startButtonClasses: unwrappedTableModel.editStartButton(row.id, index), cancelButtonClasses: unwrappedTableModel.editCancelButton(row.id, index), children: showSelectCol && (_jsx("td", { className: classNames(unwrappedTableModel.rowSelectColTd(row.id, index)), "aria-colindex": 1, children: _jsx(SelectionInput, { selected: selectedSet.has(row.id), selectionInputModel: getSelectInputModel(row.id, selectModel), selectCallback: getSelectHandler(row.id), additionalClasses: unwrappedTableModel.rowSelectInput(row.id, index) }) })) }, row.id));
+                }) })] }));
+    return (_jsxs("div", { "data-testid": "rbdg-top-level-div", className: classNames(unwrappedAdditionalStyleModel.topLevelDiv), children: [normalizedTableFilterModel && !useToolbar && (_jsxs("div", { "data-testid": "rbdg-filter-inputs-div", className: classNames(unwrappedAdditionalStyleModel.filterInputsDiv), children: [_jsx(ToggleButton, { isActive: filterOptionsVisible, label: "".concat(filterOptionsVisible ? "Hide" : "Show ", " Filter Options"), onClick: handleToggleFilterOptions, classes: (_b = styleModel === null || styleModel === void 0 ? void 0 : styleModel.additionalComponentsStyleModel) === null || _b === void 0 ? void 0 : _b.filterUiToggleButton }), filterOptionsVisible && (_jsx(FilterOptionsTable, { caption: filterModel.filterTableCaption, filterState: filterState, setFilterState: normalizedTableFilterModel.setTableFilterState, styleModel: styleModel === null || styleModel === void 0 ? void 0 : styleModel.filterInputTableStyleModel }))] })), useToolbar && (_jsx(ToolbarContainer, { interfaces: toolbarInterfaces, styleModel: styleModel === null || styleModel === void 0 ? void 0 : styleModel.toolbarStyleModel })), _jsxs("div", { "data-testid": "rbdg-table-and-pagination-div", className: classNames(unwrappedAdditionalStyleModel.tableAndPaginationDiv), children: [responsive ? (_jsx("div", { "data-testid": "rbdg-table-div", className: "table-responsive", children: mainTable })) : (_jsx(_Fragment, { children: mainTable })), normalizedModel && (_jsx(Pagination, { normalizedModel: normalizedModel, prePagingNumRows: sortedRows.length, containerDivClasses: unwrappedAdditionalStyleModel.paginationUiDiv }))] })] }));
 };
 export default Grid;

package/export/ExportForm.d.ts

@@ -0,0 +1,9 @@
+import { ExportFnInfo } from "./useExportFn";
+import { FC } from "react";
+import { ExportFormStyleModel } from "../styling/types";
+export interface ExportFormProps {
+    exportFnInfo: ExportFnInfo;
+    styleModel?: ExportFormStyleModel;
+}
+declare const ExportForm: FC<ExportFormProps>;
+export default ExportForm;

package/export/ExportForm.js

@@ -0,0 +1,97 @@
+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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+import classNames from "classnames";
+var ExportForm = function (_a) {
+    var _b = _a.exportFnInfo, exportFn = _b.exportFn, formattersExist = _b.formattersExist, paginationEnabled = _b.paginationEnabled, filteringEnabled = _b.filteringEnabled, rowCounts = _b.rowCounts, styleModel = _a.styleModel;
+    var formId = useId();
+    var _c = useState({
+        stage: "original",
+        formatted: false,
+        fileType: "json",
+    }), formState = _c[0], setFormState = _c[1];
+    var getChangeHandler = function (field, value) {
+        return function () {
+            setFormState(function (prev) {
+                var _a;
+                return (__assign(__assign({}, prev), (_a = {}, _a[field] = value, _a)));
+            });
+        };
+    };
+    var getRowCountLabel = function (featureType, count) {
+        if (count === undefined) {
+            return "".concat(featureType, " disabled");
+        }
+        return "".concat(count, " ").concat(count === 1 ? "row" : "rows");
+    };
+    var stageOptions = [
+        {
+            value: "original",
+            label: "Original rows (total ".concat(rowCounts.total, " ").concat(rowCounts.total === 1 ? "row" : "rows", ")"),
+            disabled: false,
+        },
+        {
+            value: "filtered",
+            label: "After filters applied (".concat(getRowCountLabel("filtering", rowCounts.filtered), ")"),
+            disabled: !filteringEnabled,
+        },
+        {
+            value: "paged",
+            label: "Current page only (".concat(getRowCountLabel("pagination", rowCounts.currentPage), ")"),
+            disabled: !paginationEnabled,
+        },
+    ];
+    var formatOptions = [
+        {
+            formatted: false,
+            label: "Use original data",
+            disabled: false,
+        },
+        {
+            formatted: true,
+            label: "Apply formatters to data".concat(formattersExist ? "" : " (no formatters defined)"),
+            disabled: !formattersExist,
+        },
+    ];
+    var fileTypeOptions = [
+        {
+            fileType: "json",
+            label: "JSON",
+        },
+        {
+            fileType: "csv",
+            label: "CSV",
+        },
+    ];
+    var handleSubmit = function (event) {
+        event.preventDefault();
+        var stage = formState.stage, fileType = formState.fileType, formatted = formState.formatted;
+        exportFn(stage, fileType, formatted);
+    };
+    var legendClasses = classNames((styleModel === null || styleModel === void 0 ? void 0 : styleModel.legend) || []);
+    var radioContainerClasses = classNames((styleModel === null || styleModel === void 0 ? void 0 : styleModel.radioContainer) || ["form-check"]);
+    var radioInputClasses = classNames((styleModel === null || styleModel === void 0 ? void 0 : styleModel.radioInput) || ["form-check-input"]);
+    var radioLabelClasses = classNames((styleModel === null || styleModel === void 0 ? void 0 : styleModel.radioLabel) || ["form-check-label"]);
+    var submitButtonClasses = classNames((styleModel === null || styleModel === void 0 ? void 0 : styleModel.submitButton) || ["btn", "btn-secondary"]);
+    return (_jsxs("form", { onSubmit: handleSubmit, children: [_jsxs("fieldset", { children: [_jsx("legend", { className: legendClasses, children: "Choose data to export" }), stageOptions.map(function (_a) {
+                        var value = _a.value, label = _a.label, disabled = _a.disabled;
+                        return (_jsxs("div", { className: radioContainerClasses, children: [_jsx("input", { className: radioInputClasses, type: "radio", id: "".concat(formId, "-").concat(value), value: value, checked: formState.stage === value, onChange: getChangeHandler("stage", value), disabled: disabled }), _jsx("label", { className: radioLabelClasses, htmlFor: "".concat(formId, "-").concat(value), children: label })] }, value));
+                    })] }), _jsxs("fieldset", { children: [_jsx("legend", { className: legendClasses, children: "Choose whether to apply formatters" }), formatOptions.map(function (_a) {
+                        var formatted = _a.formatted, label = _a.label, disabled = _a.disabled;
+                        return (_jsxs("div", { className: radioContainerClasses, children: [_jsx("input", { className: radioInputClasses, type: "radio", id: "".concat(formId, "-").concat(formatted), value: String(formatted), checked: formState.formatted === formatted, onChange: getChangeHandler("formatted", formatted), disabled: disabled }), _jsx("label", { className: radioLabelClasses, htmlFor: "".concat(formId, "-").concat(formatted), children: label })] }, String(formatted)));
+                    })] }), _jsxs("fieldset", { children: [_jsx("legend", { className: legendClasses, children: "Choose the file type" }), fileTypeOptions.map(function (_a) {
+                        var fileType = _a.fileType, label = _a.label;
+                        return (_jsxs("div", { className: radioContainerClasses, children: [_jsx("input", { className: radioInputClasses, type: "radio", id: "".concat(formId, "-").concat(fileType), value: fileType, checked: formState.fileType === fileType, onChange: getChangeHandler("fileType", fileType) }), _jsx("label", { className: radioLabelClasses, htmlFor: "".concat(formId, "-").concat(fileType), children: label })] }, fileType));
+                    })] }), _jsx("button", { type: "submit", className: submitButtonClasses, children: "Submit" })] }));
+};
+export default ExportForm;

package/export/types.d.ts

@@ -0,0 +1,5 @@
+import { RowId } from "../types";
+export type FormattedExportRow = {
+    id: RowId;
+    data: Record<string, string | number>;
+};

package/export/types.js

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

package/export/useExportFn.d.ts

@@ -0,0 +1,23 @@
+import { ColDef, RowDef } from "../types";
+export interface UseExportFnsParams {
+    rows: RowDef[];
+    cols: ColDef[];
+    filteredRows?: RowDef[];
+    currentPageRows?: RowDef[];
+}
+export type Stage = "original" | "filtered" | "paged";
+export type FileType = "csv" | "json";
+export type ExportFn = (stage: Stage, fileType: FileType, formatted: boolean) => void;
+export interface ExportFnInfo {
+    exportFn: ExportFn;
+    formattersExist: boolean;
+    filteringEnabled: boolean;
+    paginationEnabled: boolean;
+    rowCounts: {
+        total: number;
+        filtered?: number;
+        currentPage?: number;
+    };
+}
+declare const useExportFn: (params: UseExportFnsParams) => ExportFnInfo;
+export default useExportFn;

package/export/useExportFn.js

@@ -0,0 +1,115 @@
+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 { dateToDatetimeInputStr, dateToInputStr } from "../util/datetime";
+import Papa from "papaparse";
+import { useCallback, useMemo } from "react";
+var downloadFile = function (data, filename, type) {
+    var blob = new Blob([data], { type: type });
+    var url = URL.createObjectURL(blob);
+    var a = document.createElement("a");
+    a.href = url;
+    a.download = filename;
+    a.click();
+    a.remove();
+    setTimeout(function () { return URL.revokeObjectURL(url); }, 0);
+};
+var getDefaultFormatter = function (type) {
+    switch (type) {
+        case "date":
+            return dateToInputStr;
+        case "datetime":
+            return dateToDatetimeInputStr;
+        default:
+            return function (a) { return a; };
+    }
+};
+var applyFormatters = function (rows, cols, defaultOnly) {
+    var colToFormatter = cols.reduce(function (map, _a) {
+        var name = _a.name, formatter = _a.formatter, type = _a.type;
+        var normalizedFormatter = (!defaultOnly && formatter) || getDefaultFormatter(type);
+        map.set(name, normalizedFormatter);
+        return map;
+    }, new Map());
+    return rows.map(function (_a) {
+        var id = _a.id, data = _a.data;
+        return ({
+            id: id,
+            data: Object.keys(data).reduce(function (newData, name) {
+                var formatter = colToFormatter.get(name);
+                newData[name] = formatter(data[name]);
+                return newData;
+            }, {}),
+        });
+    });
+};
+var flattenExportRows = function (rows) {
+    return rows.map(function (_a) {
+        var id = _a.id, data = _a.data;
+        return (__assign({ id: id }, data));
+    });
+};
+var exportJson = function (rows, cols, useDefaultFormatters) {
+    var formattedRows = applyFormatters(rows, cols, useDefaultFormatters);
+    var json = JSON.stringify(formattedRows, null, 2);
+    downloadFile(json, "export.json", "application/json");
+};
+var exportCsv = function (rows, cols, useDefaultFormatters) {
+    var formattedRows = applyFormatters(rows, cols, useDefaultFormatters);
+    var flattenedRows = flattenExportRows(formattedRows);
+    var csv = Papa.unparse(flattenedRows, { header: true });
+    downloadFile(csv, "export.csv", "text/csv");
+};
+var useExportFn = function (_a) {
+    var rows = _a.rows, cols = _a.cols, filteredRows = _a.filteredRows, currentPageRows = _a.currentPageRows;
+    var formattersExist = useMemo(function () { return cols.reduce(function (prev, _a) {
+        var formatter = _a.formatter;
+        return prev || !!formatter;
+    }, false); }, [cols]);
+    var exportFn = useCallback(function (stage, fileType, formatted) {
+        if (stage === "filtered" && !filteredRows) {
+            throw Error("Cannot export filtered rows because filtering is not enabled for this grid");
+        }
+        if (stage === "paged" && !currentPageRows) {
+            throw Error("Cannot export current page of rows because paging is not enabled for this grid");
+        }
+        if (formatted && !formattersExist) {
+            throw Error("Cannot export formatted rows because formatters are not defined for this grid");
+        }
+        var exportRows = (function () {
+            switch (stage) {
+                case "filtered":
+                    return filteredRows;
+                case "paged":
+                    return currentPageRows;
+                default:
+                    return rows;
+            }
+        })();
+        if (fileType === "csv") {
+            exportCsv(exportRows, cols, !formatted);
+            return;
+        }
+        exportJson(exportRows, cols, !formatted);
+    }, [cols, currentPageRows, filteredRows, formattersExist, rows]);
+    return useMemo(function () { return ({
+        exportFn: exportFn,
+        formattersExist: formattersExist,
+        paginationEnabled: !!currentPageRows,
+        filteringEnabled: !!filteredRows,
+        rowCounts: {
+            total: rows.length,
+            filtered: filteredRows === null || filteredRows === void 0 ? void 0 : filteredRows.length,
+            currentPage: currentPageRows === null || currentPageRows === void 0 ? void 0 : currentPageRows.length,
+        },
+    }); }, [currentPageRows, exportFn, filteredRows, formattersExist, rows.length]);
+};
+export default useExportFn;

package/filtering/DateFilterRow.js

@@ -10,9 +10,8 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useId } from "react";
 import { dateFilterSchemeNames, } from "./types";
-import { nanoid } from "nanoid/non-secure";
 import FilterRow from "./FilterRow";
 import classNames from "classnames";
 var DateFilterRow = function (_a) {
@@ -35,7 +34,7 @@ var DateFilterRow = function (_a) {
     };
     var enabled = filterState.enabled, scheme = filterState.scheme, startDate = filterState.startDate, endDate = filterState.endDate;
     var inputType = includeTime ? "datetime-local" : "date";
-    var inputId = useMemo(function () { return nanoid(); }, []);
+    var inputId = useId();
     var startDateInputId = "$startDate-".concat(inputId);
     var endDateInputId = "$endDate-".concat(inputId);
     var startDateInputLabel = "".concat(columnLabel, " Column Filter Start Date");

package/filtering/FilterOptionsTable.d.ts

@@ -1,7 +1,7 @@
 import { FC } from "react";
 import { EditableTableFilterState, TableFilterState } from "./types";
 import { FilterInputTableStyleModel } from "../styling/types";
-interface FilterOptionsTableProps {
+export interface FilterOptionsTableProps {
     filterState: TableFilterState;
     setFilterState: (filterState: EditableTableFilterState) => void;
     caption?: string;

package/filtering/FilterOptionsTable.js

@@ -112,7 +112,6 @@ var FilterOptionsTable = function (_a) {
         var editableTableFilterState = convertFilterFormStateToEditableState(formState);
         setFilterState(editableTableFilterState);
     };
-    // TODO: consider using an accordion to show and hide this component
-    return (_jsxs("form", { onSubmit: onSubmit, children: [_jsxs("table", { className: classNames.apply(void 0, __spreadArray(["table"], unwrappedStyleModel.table, false)), children: [caption && (_jsx("caption", { className: classNames(unwrappedStyleModel.caption), children: caption })), _jsx("thead", { className: classNames.apply(void 0, unwrappedStyleModel.thead), children: _jsx("tr", { className: classNames.apply(void 0, unwrappedStyleModel.theadTr), children: ["Enabled", "Column", "Type", "Operator", "Value"].map(function (colName, index) { return (_jsx("th", { className: classNames.apply(void 0, unwrappedStyleModel.theadTh(index)), children: colName }, index)); }) }) }), _jsx("tbody", { className: classNames.apply(void 0, unwrappedStyleModel.tbody), children: getRows() })] }), _jsx("button", { className: classNames("btn", { "btn-secondary": unwrappedStyleModel.submitButton.length === 0 }, unwrappedStyleModel.submitButton), type: "submit", children: "Submit" })] }));
+    return (_jsxs("form", { onSubmit: onSubmit, className: classNames(styleModel === null || styleModel === void 0 ? void 0 : styleModel.form), children: [_jsxs("table", { className: classNames.apply(void 0, __spreadArray(["table"], unwrappedStyleModel.table, false)), children: [caption && (_jsx("caption", { className: classNames(unwrappedStyleModel.caption), children: caption })), _jsx("thead", { className: classNames.apply(void 0, unwrappedStyleModel.thead), children: _jsx("tr", { className: classNames.apply(void 0, unwrappedStyleModel.theadTr), children: ["Enabled", "Column", "Type", "Operator", "Value"].map(function (colName, index) { return (_jsx("th", { className: classNames.apply(void 0, unwrappedStyleModel.theadTh(index)), children: colName }, index)); }) }) }), _jsx("tbody", { className: classNames.apply(void 0, unwrappedStyleModel.tbody), children: getRows() })] }), _jsx("button", { className: classNames("btn", { "btn-secondary": unwrappedStyleModel.submitButton.length === 0 }, unwrappedStyleModel.submitButton), type: "submit", children: "Submit" })] }));
 };
 export default FilterOptionsTable;

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.1.0",
+  "version": "2.3.0",
   "license": "MIT",
   "author": "Brook Li",
   "homepage": "https://react-bootstrap-data-grid.vercel.app/",
@@ -16,7 +16,8 @@
   ],
   "dependencies": {
     "classnames": "^2.5.1",
-    "dayjs": "^1.11.13"
+    "dayjs": "^1.11.13",
+    "papaparse": "^5.5.3"
   },
   "peerDependencies": {
     "react": "^19",

package/pagination/Pagination.d.ts

@@ -1,11 +1,9 @@
 import { FC } from "react";
-import { JustifyContentSetting } from "../types";
 import { NormalizedPaginationModel } from "./types";
 export interface PaginationProps {
     normalizedModel: NormalizedPaginationModel;
     prePagingNumRows: number;
-    pageSelectorAriaLabel?: string;
-    pageSelectorJustifyContent?: JustifyContentSetting;
+    containerDivClasses: string[];
 }
 declare const Pagination: FC<PaginationProps>;
 export default Pagination;

package/pagination/Pagination.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import PageSizeSelector from "./PageSizeSelector";
 import PageSelector from "./PageSelector";
+import classNames from "classnames";
 var Pagination = function (_a) {
-    var normalizedModel = _a.normalizedModel, prePagingNumRows = _a.prePagingNumRows;
+    var normalizedModel = _a.normalizedModel, prePagingNumRows = _a.prePagingNumRows, containerDivClasses = _a.containerDivClasses;
     var pageSizeOptions = normalizedModel.pageSizeOptions, pageSizeIndex = normalizedModel.pageSizeIndex, currentPage = normalizedModel.currentPage, setCurrentPage = normalizedModel.setCurrentPage, setPageSizeIndex = normalizedModel.setPageSizeIndex, componentSize = normalizedModel.componentSize, maxPageButtons = normalizedModel.maxPageButtons, pageSelectorAriaLabel = normalizedModel.pageSelectorAriaLabel, pageSelectorJustifyContent = normalizedModel.pageSelectorJustifyContent;
     var numPages = Math.ceil(prePagingNumRows / pageSizeOptions[pageSizeIndex]);
     var pageIndexAwarePageSizeSetter = function (newPageSizeIndex) {
@@ -16,6 +17,8 @@ var Pagination = function (_a) {
             setCurrentPage(maxPages);
         }
     };
-    return (_jsxs("div", { className: "d-flex justify-content-end gap-2", children: [_jsx(PageSizeSelector, { componentSize: componentSize, pageSizeOptions: pageSizeOptions, pageSizeIndex: pageSizeIndex, handleSetPageSize: pageIndexAwarePageSizeSetter }), _jsx(PageSelector, { numPages: numPages, pageNum: currentPage, numButtons: maxPageButtons, setPageNum: setCurrentPage, size: componentSize, ariaLabel: pageSelectorAriaLabel, alignment: pageSelectorJustifyContent })] }));
+    return (_jsxs("div", { "data-testid": "pagination ui container div", className: classNames(containerDivClasses.length > 0
+            ? containerDivClasses
+            : ["d-flex", "justify-content-end", "gap-2", "px-2"]), children: [_jsx(PageSizeSelector, { componentSize: componentSize, pageSizeOptions: pageSizeOptions, pageSizeIndex: pageSizeIndex, handleSetPageSize: pageIndexAwarePageSizeSetter }), _jsx(PageSelector, { numPages: numPages, pageNum: currentPage, numButtons: maxPageButtons, setPageNum: setCurrentPage, size: componentSize, ariaLabel: pageSelectorAriaLabel, alignment: pageSelectorJustifyContent })] }));
 };
 export default Pagination;

package/selection/types.d.ts

@@ -12,7 +12,7 @@ export interface SingleSelectModel {
     type: "single";
     selected: RowId | null;
     setSelected: (selected: RowId | null) => void;
-    groupName: string;
+    groupName?: string;
 }
 export type SelectModel = SingleSelectModel | MultiSelectModel;
 export type MultiExistingSelection = "full" | "partial" | "none";

package/styling/styleModelUnwrappers.js

@@ -48,10 +48,11 @@ export var unwrapFilterInputTableStyleModel = function (filterTableStyleModel) {
         ? filterTableStyleModel.startDateInput
         : function () { return []; }, endDateInput: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.endDateInput)
         ? filterTableStyleModel.endDateInput
-        : function () { return []; }, submitButton: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.submitButton) || [] })); };
+        : function () { return []; }, submitButton: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.submitButton) || [], form: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.form) || [] })); };
 export var unwrapAdditionalComponentsStyleModel = function (styleModel) { return ({
     topLevelDiv: (styleModel === null || styleModel === void 0 ? void 0 : styleModel.topLevelDiv) || [],
     filterInputsDiv: (styleModel === null || styleModel === void 0 ? void 0 : styleModel.filterInputsDiv) || [],
     tableAndPaginationDiv: (styleModel === null || styleModel === void 0 ? void 0 : styleModel.tableAndPaginationDiv) || [],
     filterUiToggleButton: (styleModel === null || styleModel === void 0 ? void 0 : styleModel.filterUiToggleButton) || [],
+    paginationUiDiv: (styleModel === null || styleModel === void 0 ? void 0 : styleModel.paginationUiDiv) || [],
 }); };

package/styling/types.d.ts

@@ -31,15 +31,32 @@ export type FilterInputTableStyleModel = SharedTableStyleModel & {
     startDateInput?: (rowIndex: number) => string[];
     endDateInput?: (rowIndex: number) => string[];
     submitButton?: string[];
+    form?: string[];
 };
 export interface AdditionalComponentsStyleModel {
     topLevelDiv?: string[];
     filterInputsDiv?: string[];
     tableAndPaginationDiv?: string[];
     filterUiToggleButton?: 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/toolbar/Toolbar.d.ts

@@ -0,0 +1,12 @@
+import { ToolbarOption } from "./types";
+import { FC } from "react";
+export interface ToolbarProps {
+    enabledFeatures: Partial<Record<ToolbarOption, boolean>>;
+    option: ToolbarOption | null;
+    setOption: (option: ToolbarOption | null) => void;
+    toolbarClasses?: string[];
+    activeClasses?: string[];
+    inactiveClasses?: string[];
+}
+declare const Toolbar: FC<ToolbarProps>;
+export default Toolbar;

package/toolbar/Toolbar.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+var buttonSpecs = {
+    filtering: {
+        label: "Filtering",
+        icon: (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", viewBox: "0 0 16 16", children: _jsx("path", { d: "M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5m-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5m-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5" }) })),
+    },
+    exporting: {
+        label: "Export",
+        icon: (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", viewBox: "0 0 16 16", children: [_jsx("path", { d: "M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5" }), _jsx("path", { d: "M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708z" })] })),
+    },
+};
+// TODO: figure out tabindex and accessibility
+var Toolbar = function (_a) {
+    var enabledFeatures = _a.enabledFeatures, option = _a.option, setOption = _a.setOption, toolbarClasses = _a.toolbarClasses, activeClasses = _a.activeClasses, inactiveClasses = _a.inactiveClasses;
+    return (_jsx("div", { className: classNames(toolbarClasses || ["hstack", "gap-2", "justify-content-start", "px-2"]), role: "toolbar", children: Object.keys(buttonSpecs)
+            .filter(function (toolbarOption) { return !!enabledFeatures[toolbarOption]; })
+            .map(function (toolbarOption) { return (_jsx("button", { "aria-label": buttonSpecs[toolbarOption].label, "aria-roledescription": "Grouped toggle button to show/hide ".concat(toolbarOption, " UI"), "aria-pressed": option === toolbarOption, className: classNames.apply(void 0, (option === toolbarOption
+                ? activeClasses || ["btn", "btn-outline-secondary", "active"]
+                : inactiveClasses || ["btn", "btn-outline-secondary"])), title: buttonSpecs[toolbarOption].label, onClick: function () {
+                setOption(option === toolbarOption
+                    ? null
+                    : toolbarOption);
+            }, children: buttonSpecs[toolbarOption].icon }, toolbarOption)); }) }));
+};
+export default Toolbar;

package/toolbar/ToolbarContainer.d.ts

@@ -0,0 +1,9 @@
+import { ToolbarInterfaces } from "./types";
+import { FC } from "react";
+import { ToolbarStyleModel } from "../styling/types";
+interface ToolbarContainerProps {
+    interfaces: ToolbarInterfaces;
+    styleModel?: ToolbarStyleModel;
+}
+declare const ToolbarContainer: FC<ToolbarContainerProps>;
+export default ToolbarContainer;

package/toolbar/ToolbarContainer.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import Toolbar from "./Toolbar";
+import classNames from "classnames";
+var ToolbarContainer = function (_a) {
+    var interfaces = _a.interfaces, styleModel = _a.styleModel;
+    var _b = useState(null), option = _b[0], setOption = _b[1];
+    var enabledFeatures = Object.keys(interfaces).reduce(function (prev, toolbarOption) {
+        prev[toolbarOption] =
+            !!interfaces[toolbarOption];
+        return prev;
+    }, {});
+    // TODO: mention in documentation that Bootstrap 5.3 is required due to the
+    // use of the z-index utility
+    return (_jsxs("div", { className: "vstack", "data-testid": "toolbar container", children: [_jsx(Toolbar, { enabledFeatures: enabledFeatures, option: option, setOption: setOption, toolbarClasses: styleModel === null || styleModel === void 0 ? void 0 : styleModel.toolbar, activeClasses: styleModel === null || styleModel === void 0 ? void 0 : styleModel.activeButton, inactiveClasses: styleModel === null || styleModel === void 0 ? void 0 : styleModel.inactiveButton }), _jsx("div", { className: "position-relative", children: option !== null && (_jsx("div", { "data-testid": "toolbar feature interface content container", className: classNames((styleModel === null || styleModel === void 0 ? void 0 : styleModel.interfaceContainer) || [
+                        "position-absolute",
+                        "z-1",
+                        "bg-body",
+                        "border",
+                        "shadow",
+                        "p-2",
+                    ]), children: interfaces[option] })) })] }));
+};
+export default ToolbarContainer;

package/toolbar/types.d.ts

@@ -0,0 +1,3 @@
+import { ReactNode } from "react";
+export type ToolbarOption = "filtering" | "exporting";
+export type ToolbarInterfaces = Partial<Record<ToolbarOption, ReactNode>>;

package/toolbar/types.js

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

package/toolbar/useInterfaces.d.ts

@@ -0,0 +1,9 @@
+import { FilterOptionsTableProps } from "../filtering/FilterOptionsTable";
+import { ToolbarInterfaces } from "./types";
+import { ExportFormProps } from "../export/ExportForm";
+export interface InterfaceParams {
+    filtering?: FilterOptionsTableProps;
+    exporting?: ExportFormProps;
+}
+declare const useInterfaces: (params: InterfaceParams) => ToolbarInterfaces;
+export default useInterfaces;

package/toolbar/useInterfaces.js

@@ -0,0 +1,23 @@
+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 { jsx as _jsx } from "react/jsx-runtime";
+import FilterOptionsTable from "../filtering/FilterOptionsTable";
+import { useMemo } from "react";
+import ExportForm from "../export/ExportForm";
+var useInterfaces = function (_a) {
+    var filtering = _a.filtering, exporting = _a.exporting;
+    return useMemo(function () { return ({
+        filtering: filtering ? _jsx(FilterOptionsTable, __assign({}, filtering)) : undefined,
+        exporting: exporting ? _jsx(ExportForm, __assign({}, exporting)) : undefined,
+    }); }, [exporting, filtering]);
+};
+export default useInterfaces;