@procore/data-table 14.7.0 → 14.9.0

package/dist/modern/index.cjs

@@ -13,6 +13,7 @@ var ulid$1 = require('ulid');
 var toastAlert = require('@procore/toast-alert');
 var ReactDOM = require('react-dom');
 var server = require('react-dom/server');
+var webSdkStorage = require('@procore/web-sdk-storage');
 var _isEqual = require('lodash.isequal');
 var ReactResizeDetector = require('react-resize-detector');
 var labsDatetimeSelect = require('@procore/labs-datetime-select');
@@ -1417,7 +1418,7 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
   animation-iteration-count: infinite;
   animation-name: ag-shake-left-to-right;
 }
-@keyframes _ag-shake-left-to-right_10eap_366 {
+@keyframes _ag-shake-left-to-right_7x7l9_366 {
   from {
     padding-left: 6px;
     padding-right: 2px;
@@ -5418,7 +5419,7 @@ input[class^=ag-][type=button]:focus, button[class^=ag-]:focus {
   animation-iteration-count: infinite;
   animation-timing-function: linear;
 }
-@keyframes _spin_10eap_1 {
+@keyframes _spin_7x7l9_1 {
   from {
     transform: rotate(0deg);
   }
@@ -7539,6 +7540,18 @@ input[class^=ag-][type=range]:disabled {
   box-shadow: 0px -6px 12px -3px hsla(200, 8%, 10%, 0.25);
   z-index: 2;
 }
+.ag-theme-alpine.ag-theme-alpine .ag-floating-bottom .ag-pinned-left-floating-bottom .ag-row, .ag-theme-alpine.ag-theme-alpine .ag-floating-bottom .ag-pinned-right-floating-bottom .ag-row {
+  background-color: #f4f5f6;
+}
+.ag-theme-alpine.ag-theme-alpine .ag-floating-bottom .ag-pinned-left-floating-bottom {
+  z-index: 1;
+  box-shadow: 3px 0px 12px 0.5px hsl(200, 8%, 90%);
+  border-right: 1px solid #d6dadc;
+}
+.ag-theme-alpine.ag-theme-alpine .ag-floating-bottom .ag-pinned-right-floating-bottom {
+  box-shadow: -3px 0px 12px 0.5px hsl(200, 8%, 90%);
+  border-left: 1px solid #d6dadc;
+}
 .ag-theme-alpine.ag-theme-alpine .ag-group-value {
   line-height: 16px;
 }
@@ -7905,7 +7918,7 @@ input[class^=ag-][type=range]:disabled {
   padding-left: 16px;
 }
 
-div._contextPanel_10eap_7131 {
+div._contextPanel_7x7l9_7144 {
   width: 400px;
   transition: all ease 500ms;
   flex: 0 0 auto;
@@ -7914,7 +7927,7 @@ div._contextPanel_10eap_7131 {
   border: 1px solid #d6dadc;
   display: flex;
 }
-div._contextPanel--hidden_10eap_7140 {
+div._contextPanel--hidden_7x7l9_7153 {
   border: none;
   overflow: hidden;
   padding: 0px;
@@ -7922,50 +7935,50 @@ div._contextPanel--hidden_10eap_7140 {
   width: 0px;
 }
 
-._contextPanelWrapper_10eap_7148 {
+._contextPanelWrapper_7x7l9_7161 {
   position: relative;
   flex-grow: 1;
 }
 
-._contextPanelBody_10eap_7153 {
+._contextPanelBody_7x7l9_7166 {
   width: clamp(380px, 400px, 100%);
 }
 
-._contextPanel-stickyHeader_10eap_7157 {
+._contextPanel-stickyHeader_7x7l9_7170 {
   background-color: #ffffff;
   position: sticky;
   top: 0;
   z-index: 5;
 }
 
-._filters-list_10eap_7164 {
+._filters-list_7x7l9_7177 {
   padding: 0;
   margin: 0;
 }
-._filters-list_10eap_7164 ol {
+._filters-list_7x7l9_7177 ol {
   padding: 0;
   margin: 0;
 }
 
-._col-drag-column-icon_10eap_7173 {
+._col-drag-column-icon_7x7l9_7186 {
   color: #6a767c;
 }
 
-._tabular-nums_10eap_7177 {
+._tabular-nums_7x7l9_7190 {
   font-variant-numeric: tabular-nums;
 }`;
 document.head.appendChild(document.createElement("style")).appendChild(document.createTextNode(css));
 var styles_default = {
-  "contextPanel": "_contextPanel_10eap_7131",
-  "contextPanel--hidden": "_contextPanel--hidden_10eap_7140",
-  "contextPanelWrapper": "_contextPanelWrapper_10eap_7148",
-  "contextPanelBody": "_contextPanelBody_10eap_7153",
-  "contextPanel-stickyHeader": "_contextPanel-stickyHeader_10eap_7157",
-  "filters-list": "_filters-list_10eap_7164",
-  "col-drag-column-icon": "_col-drag-column-icon_10eap_7173",
-  "tabular-nums": "_tabular-nums_10eap_7177",
-  "ag-shake-left-to-right": "_ag-shake-left-to-right_10eap_366",
-  "spin": "_spin_10eap_1"
+  "contextPanel": "_contextPanel_7x7l9_7144",
+  "contextPanel--hidden": "_contextPanel--hidden_7x7l9_7153",
+  "contextPanelWrapper": "_contextPanelWrapper_7x7l9_7161",
+  "contextPanelBody": "_contextPanelBody_7x7l9_7166",
+  "contextPanel-stickyHeader": "_contextPanel-stickyHeader_7x7l9_7170",
+  "filters-list": "_filters-list_7x7l9_7177",
+  "col-drag-column-icon": "_col-drag-column-icon_7x7l9_7186",
+  "tabular-nums": "_tabular-nums_7x7l9_7190",
+  "ag-shake-left-to-right": "_ag-shake-left-to-right_7x7l9_366",
+  "spin": "_spin_7x7l9_1"
 };
 
 // src/utils/getCellValueTypographyProps.ts
@@ -55170,6 +55183,16 @@ function getParentSelectionState(parent, affectedRows, parentChildrenMap) {
     return rowSelectionState.indeterminate;
   }
 }
+function getNodeSelectedState(node) {
+  const filteredChildren = node.childrenAfterFilter || [];
+  const numSelectedChildren = filteredChildren.filter(
+    (child) => child.isSelected()
+  ).length;
+  return {
+    selected: filteredChildren.length > 0 ? numSelectedChildren > 0 : node.isSelected(),
+    indeterminate: filteredChildren ? numSelectedChildren > 0 && filteredChildren.length !== numSelectedChildren : false
+  };
+}
 function getAffectedRows(currentRows, selectionNode, affectedRows) {
   const isNodeRootLevel = isNodeRootLevelOfGrid(selectionNode.parent);
   const nodeId = selectionNode.id;
@@ -55249,12 +55272,8 @@ function getAffectedRows(currentRows, selectionNode, affectedRows) {
 function noop2() {
 }
 function ClientSideRowCheckbox(props) {
-  const [selected, setSelected] = React83.useState(props.node.isSelected());
-  const numSelectedChildren = (props.node.childrenAfterGroup || []).filter(
-    (child) => child.isSelected()
-  ).length;
-  const selectedState = props.node.childrenAfterGroup ? numSelectedChildren > 0 : props.node.isSelected();
-  const indeterminateState = props.node.childrenAfterGroup ? numSelectedChildren > 0 && props.node.childrenAfterGroup?.length !== numSelectedChildren : false;
+  const [_selected, setSelected] = React83.useState(props.node.isSelected());
+  const { selected, indeterminate } = getNodeSelectedState(props.node);
   function handleRowSelection(event) {
     if (props.node === event.node) {
       setSelected(event.node.isSelected());
@@ -55269,13 +55288,18 @@ function ClientSideRowCheckbox(props) {
   return /* @__PURE__ */ React83__default.default.createElement(coreReact.Box, { paddingRight: "md" }, /* @__PURE__ */ React83__default.default.createElement(
     coreReact.Checkbox,
     {
-      checked: selectedState,
+      checked: selected,
       disabled: props.data?.checkboxDisabled,
-      indeterminate: indeterminateState,
+      indeterminate,
       "data-qa": "rowCheckbox",
       onClick: noop2,
-      onChange: () => {
-        props.node.setSelected(!selected, void 0, "checkboxSelected");
+      onChange: (event) => {
+        return props.node.setSelectedParams({
+          newValue: event.target.checked,
+          groupSelectsFiltered: true,
+          event,
+          source: "checkboxSelected"
+        });
       }
     }
   ));
@@ -55437,23 +55461,33 @@ var AutoGroupCellRenderer = (props) => {
 };
 
 // src/CellRenderers/rowActionsCellStyles.scss
-var css6 = `div[col-id=rowActions] {
-  left: calc(var(--viewport-width) - var(--rowActions-width)) !important;
-  padding: 0px 8px !important;
+var css6 = `.ag-theme-alpine.ag-theme-alpine div.ag-cell[col-id=rowActions] {
+  left: var(--viewport-width) !important;
+  width: 0px !important;
+  padding: 0px !important;
   position: sticky;
   visibility: hidden;
   flex: none;
+  background: none;
+  overflow: visible;
 }
-.ag-row-hover div[col-id=rowActions] {
+.ag-theme-alpine.ag-theme-alpine div.ag-cell[col-id=rowActions] .inline-nonedit-wrapper {
+  width: auto;
+  height: 100%;
+  padding: 0px 8px;
+  position: absolute;
+  right: 0px;
+}
+.ag-theme-alpine.ag-theme-alpine .ag-row-hover div.ag-cell[col-id=rowActions] .inline-nonedit-wrapper {
   background: #f4f5f6;
 }
-.ag-row-focus div[col-id=rowActions] {
+.ag-theme-alpine.ag-theme-alpine .ag-row-focus div.ag-cell[col-id=rowActions] .inline-nonedit-wrapper {
   background: #f6f9fe;
 }
-.ag-row-hover div[col-id=rowActions], .ag-row-focus div[col-id=rowActions] {
+.ag-theme-alpine.ag-theme-alpine .ag-row-hover .ag-cell[col-id=rowActions], .ag-theme-alpine.ag-theme-alpine .ag-row-focus .ag-cell[col-id=rowActions] {
   visibility: visible;
 }
-div[col-id=rowActions-pinned] {
+.ag-theme-alpine.ag-theme-alpine .ag-cell[col-id=rowActions-pinned] {
   background: "transparent";
   left: calc(var(--viewport-width) - var(--rowActions-width)) !important;
   padding: 2px 8px !important;
@@ -55462,8 +55496,18 @@ div[col-id=rowActions-pinned] {
 document.head.appendChild(document.createElement("style")).appendChild(document.createTextNode(css6));
 
 // src/CellRenderers/RowActionsCell.tsx
+function getRowActions(actions, rowProps) {
+  if (typeof actions === "function") {
+    return actions(rowProps);
+  }
+  return actions;
+}
 var InternalRowActionsCellRenderer = (props) => {
-  if (props.rowPinned || props.columnDefinition.cellRendererParams.hideActionsOnGroupedRow && props.isGroup) {
+  const actions = getRowActions(
+    props.columnDefinition.cellRendererParams.actions,
+    props
+  );
+  if (props.rowPinned || props.columnDefinition.cellRendererParams.hideActionsOnGroupedRow && props.isGroup || actions.length === 0) {
     return null;
   }
   return /* @__PURE__ */ React83__default.default.createElement(
@@ -55474,7 +55518,7 @@ var InternalRowActionsCellRenderer = (props) => {
       size: "xs",
       margin: "0px 4px"
     },
-    props.columnDefinition.cellRendererParams.actions.map((Action, idx) => {
+    actions.map((Action, idx) => {
       const key = `${Action.displayName}${idx}`;
       return /* @__PURE__ */ React83__default.default.createElement(Action, { ...props, key });
     })
@@ -56126,6 +56170,7 @@ var css7 = `.ag-header-cell .data-table-header-menu {
 document.head.appendChild(document.createElement("style")).appendChild(document.createTextNode(css7));
 
 // src/GenericHeader/GenericHeader.tsx
+var filterChanged = "filterChanged";
 var selectionChanged = "selectionChanged";
 var paginationChanged = "paginationChanged";
 var tooltipDelay = {
@@ -56427,7 +56472,7 @@ var GenericHeaderRenderer = (props) => {
         if (node.selectable === false) {
           return;
         }
-        if (node.isSelected()) {
+        if (getNodeSelectedState(node).selected) {
           hasSelectedNodes = true;
         } else {
           isAllSelected = false;
@@ -56441,9 +56486,11 @@ var GenericHeaderRenderer = (props) => {
         setSelectAll("none" /* None */);
       }
     }
+    props.api.addEventListener(filterChanged, onSelectionChanged);
     props.api.addEventListener(selectionChanged, onSelectionChanged);
     onSelectionChanged();
     return () => {
+      removeEventListenerFromGrid(filterChanged, onSelectionChanged, props.api);
       removeEventListenerFromGrid(
         selectionChanged,
         onSelectionChanged,
@@ -80978,9 +81025,20 @@ var useTableApi = ({
       message
     });
   }, []);
+  function getUnviewableGroupedColumns(columnApi2) {
+    return (columnApi2?.getRowGroupColumns() ?? []).filter((column2) => {
+      const colDef = column2.getColDef();
+      return colDef.lockVisible && colDef.hide;
+    }).map((column2) => column2.getColId());
+  }
   const setRowGrouping = React83__default.default.useCallback(
     (value) => {
+      const unviewableGroupedColumns = getUnviewableGroupedColumns(columnApi);
       columnApi?.setRowGroupColumns(value);
+      const recentlyUngroupedUnviewableColumns = unviewableGroupedColumns.filter((colId) => !value.includes(colId));
+      if (recentlyUngroupedUnviewableColumns.length > 0) {
+        columnApi?.setColumnsVisible(recentlyUngroupedUnviewableColumns, false);
+      }
       resetPagination();
     },
     [columnApi]
@@ -81450,15 +81508,16 @@ var DataTable = ({
   onTableConfigChange,
   showExpandCollapseAllToggle,
   translations: translations2 = {},
-  enableCellTextSelection
+  enableCellTextSelection,
+  localStoragePersistenceKey
 }) => {
-  const [initialTableConfig] = React83__default.default.useState(_initialTableConfig);
+  const initialTableConfig = localStoragePersistenceKey && webSdkStorage.storage.local.getItem(localStoragePersistenceKey) || _initialTableConfig;
   const onServerSideDataRequestRef = React83__default.default.useRef(onServerSideDataRequest);
   const tableRef = React83__default.default.useRef(null);
   const [totalRowCount, setTotalRowCount] = React83__default.default.useState(0);
   const [selectedGroupIndex, setSelectedGroupIndex] = React83__default.default.useState(null);
   const [initialConfigSet, setInitialConfigSet] = React83__default.default.useState(
-    !_initialTableConfig
+    !initialTableConfig
   );
   const contextPanel = useContextPanel();
   const clientI18n = coreReact.useI18nContext();
@@ -81546,18 +81605,31 @@ var DataTable = ({
       });
       checkboxColumn.current = newCheckboxColumn;
     }
-    if (!gridApi || !columnApi || !onTableConfigChange) {
+    if (!gridApi || !columnApi) {
       return;
     }
     const config = tableRef?.current?.getTableConfiguration();
     if (config) {
-      onTableConfigChange({
+      if (localStoragePersistenceKey) {
+        webSdkStorage.storage.local.setItem(localStoragePersistenceKey, {
+          ...config,
+          rowHeight: rowHeightRef.current,
+          serverFilters: filterStorage.filtersState
+        });
+      }
+      onTableConfigChange?.({
         ...config,
         rowHeight: rowHeightRef.current,
         serverFilters: filterStorage.filtersState
       });
     }
-  }, [gridApi, columnApi, onTableConfigChange, filterStorage.filtersState]);
+  }, [
+    gridApi,
+    columnApi,
+    onTableConfigChange,
+    filterStorage.filtersState,
+    localStoragePersistenceKey
+  ]);
   const filtersRef = React83.useRef(filterStorage.selectedFilters);
   if (!_isEqual__default.default(filtersRef.current, filterStorage.selectedFilters)) {
     filtersRef.current = filterStorage.selectedFilters;
@@ -81900,10 +81972,14 @@ var Table = (props) => {
         suppressMovable: true,
         suppressSizeToFit: true,
         suppressMenu: true,
-        width: rowActionsWidth.current,
-        minWidth: rowActionsWidth.current,
+        width: suppressColumnVirtualisation ? 0 : rowActionsWidth.current,
+        minWidth: suppressColumnVirtualisation ? 0 : rowActionsWidth.current,
         cellStyle: (params) => {
-          if (params.node.rowPinned === "bottom") {
+          const actions = getRowActions(
+            params.colDef.cellRendererParams.actions,
+            params
+          );
+          if (params.node.rowPinned === "bottom" || actions.length === 0) {
             return {
               display: "none"
             };
@@ -82492,6 +82568,7 @@ var Table = (props) => {
             onSortChanged: onSortEventChanged,
             onFilterChanged,
             onFirstDataRendered: props.onFirstDataRendered,
+            paginateChildRows: props.paginateChildRows,
             pagination: props.pagination,
             paginationPageSize: props.paginationPageSize || defaultPaginationPageSize,
             popupParent: props.popupParent,
@@ -82524,18 +82601,14 @@ var Table = (props) => {
       TablePagination,
       {
         gridApi,
-        isServerSideRowModel: !!onSSDR,
-        pageSize: props.paginationPageSize,
-        totalRowCount: internalTableContext.totalRowCount
+        pageSize: props.paginationPageSize
       }
     )
   );
 };
 var TablePagination = ({
   gridApi,
-  isServerSideRowModel,
-  pageSize,
-  totalRowCount
+  pageSize
 }) => {
   const [pagination, setPagination] = React83__default.default.useState({
     page: 0,
@@ -82564,7 +82637,7 @@ var TablePagination = ({
     {
       activePage: pagination.page + 1,
       "data-qa": "data-table-pagination",
-      items: isServerSideRowModel ? totalRowCount : pagination.items,
+      items: pagination.items,
       onSelectPage: (_page) => {
         gridApi?.paginationGoToPage(_page - 1);
       },
@@ -82640,7 +82713,8 @@ var ClientSideDataTable = ({
   onBulkEditUpdate,
   onTableConfigChange,
   translations: translations2 = {},
-  enableCellTextSelection
+  enableCellTextSelection,
+  localStoragePersistenceKey
 }) => {
   return /* @__PURE__ */ React83__default.default.createElement(
     DataTable,
@@ -82656,6 +82730,7 @@ var ClientSideDataTable = ({
       onBulkEditUpdate,
       showExpandCollapseAllToggle: true,
       translations: translations2,
+      localStoragePersistenceKey,
       customBulkEditorFields,
       enableCellTextSelection
     },
@@ -87136,8 +87211,8 @@ var FilterListener = class FilterListener2 extends BeanStub {
     Object.keys(allColKeysMap).forEach((key) => {
       const oldJson = JSON.stringify(oldModel[key]);
       const newJson = JSON.stringify(newModel[key]);
-      const filterChanged = oldJson != newJson;
-      if (filterChanged) {
+      const filterChanged2 = oldJson != newJson;
+      if (filterChanged2) {
         res.push(key);
       }
     });
@@ -88048,7 +88123,8 @@ var ServerSideDataTable = ({
   onTableConfigChange,
   enableCellTextSelection,
   showExpandCollapseAllToggle,
-  translations: translations2 = {}
+  translations: translations2 = {},
+  localStoragePersistenceKey
 }) => {
   return /* @__PURE__ */ React83__default.default.createElement(
     DataTable,
@@ -88066,7 +88142,8 @@ var ServerSideDataTable = ({
       showExpandCollapseAllToggle,
       translations: translations2,
       customBulkEditorFields,
-      enableCellTextSelection
+      enableCellTextSelection,
+      localStoragePersistenceKey
     },
     children
   );

package/dist/modern/index.d.cts

@@ -955,11 +955,12 @@ interface TableProps<TRow = any, TBottomRow = any> {
     onTableReady?: (tableApi: TableApi, tableApiRef: React.RefObject<TableApi>) => void;
     onColumnEverythingChanged?: (changeEvent: ColumnEverythingChangedEvent) => void;
     onFirstDataRendered?: (event: FirstDataRenderedEvent) => void;
+    paginateChildRows?: boolean;
     pagination?: boolean;
     paginationPageSize?: number;
     pinnedBottomRowData?: TBottomRow[];
     popupParent?: HTMLElement;
-    rowActions?: React.FunctionComponent<any>[];
+    rowActions?: React.FunctionComponent<any>[] | ((rowProps: DataTableCellRendererProps) => React.FunctionComponent<any>[]);
     /**
      * @private
      * Unsafe to use.
@@ -1087,6 +1088,7 @@ interface DataTableProps {
      * the updated values
      */
     onBulkEditUpdate?: (rows: BulkEditResult[]) => Promise<void>;
+    localStoragePersistenceKey?: string;
     showExpandCollapseAllToggle?: boolean;
     translations?: DataTableTranslations;
     enableCellTextSelection?: boolean;
@@ -1335,7 +1337,7 @@ interface BulkActionProps {
     style?: React__default.CSSProperties;
 }
 
-declare const _default$1: (({ analytics, children, columnDefinitions: _columnDefinitions, customBulkEditorFields, enableDynamicRowHeight, enableGroupEditAndValidation, filterGroups, getRowId, initialTableConfig: _initialTableConfig, onBulkEditUpdate, onTableConfigChange, translations, enableCellTextSelection, }: React__default.PropsWithChildren<ClientSideDataTableProps>) => React__default.JSX.Element) & {
+declare const _default$1: (({ analytics, children, columnDefinitions: _columnDefinitions, customBulkEditorFields, enableDynamicRowHeight, enableGroupEditAndValidation, filterGroups, getRowId, initialTableConfig: _initialTableConfig, onBulkEditUpdate, onTableConfigChange, translations, enableCellTextSelection, localStoragePersistenceKey, }: React__default.PropsWithChildren<ClientSideDataTableProps>) => React__default.JSX.Element) & {
     BulkActions: React__default.FunctionComponent<React__default.PropsWithChildren<BulkActionProps>>;
     BulkEditActionButton: React__default.FunctionComponent<ActionButtonProps>;
     ConfigPanelButton: React__default.FC<{}>;
@@ -1372,7 +1374,7 @@ declare const MultiSelectQuickFilterRenderer: (props: FilterProps<any[]>) => Rea
 
 declare const SingleSelectQuickFilterRenderer: (props: FilterProps<any[]>) => React__default.JSX.Element;
 
-declare const _default: (({ analytics, children, columnDefinitions: _columnDefinitions, customBulkEditorFields, enableDynamicRowHeight, enableGroupEditAndValidation, filterGroups, getRowId, initialTableConfig: _initialTableConfig, onBulkEditUpdate, onServerSideDataRequest, onTableConfigChange, enableCellTextSelection, showExpandCollapseAllToggle, translations, }: React__default.PropsWithChildren<DataTableProps>) => React__default.JSX.Element) & {
+declare const _default: (({ analytics, children, columnDefinitions: _columnDefinitions, customBulkEditorFields, enableDynamicRowHeight, enableGroupEditAndValidation, filterGroups, getRowId, initialTableConfig: _initialTableConfig, onBulkEditUpdate, onServerSideDataRequest, onTableConfigChange, enableCellTextSelection, showExpandCollapseAllToggle, translations, localStoragePersistenceKey, }: React__default.PropsWithChildren<DataTableProps>) => React__default.JSX.Element) & {
     BulkActions: React__default.FunctionComponent<React__default.PropsWithChildren<BulkActionProps>>;
     BulkEditActionButton: React__default.FunctionComponent<ActionButtonProps>;
     ConfigPanelButton: React__default.FC<{}>;

package/dist/modern/index.d.ts

@@ -955,11 +955,12 @@ interface TableProps<TRow = any, TBottomRow = any> {
     onTableReady?: (tableApi: TableApi, tableApiRef: React.RefObject<TableApi>) => void;
     onColumnEverythingChanged?: (changeEvent: ColumnEverythingChangedEvent) => void;
     onFirstDataRendered?: (event: FirstDataRenderedEvent) => void;
+    paginateChildRows?: boolean;
     pagination?: boolean;
     paginationPageSize?: number;
     pinnedBottomRowData?: TBottomRow[];
     popupParent?: HTMLElement;
-    rowActions?: React.FunctionComponent<any>[];
+    rowActions?: React.FunctionComponent<any>[] | ((rowProps: DataTableCellRendererProps) => React.FunctionComponent<any>[]);
     /**
      * @private
      * Unsafe to use.
@@ -1087,6 +1088,7 @@ interface DataTableProps {
      * the updated values
      */
     onBulkEditUpdate?: (rows: BulkEditResult[]) => Promise<void>;
+    localStoragePersistenceKey?: string;
     showExpandCollapseAllToggle?: boolean;
     translations?: DataTableTranslations;
     enableCellTextSelection?: boolean;
@@ -1335,7 +1337,7 @@ interface BulkActionProps {
     style?: React__default.CSSProperties;
 }
 
-declare const _default$1: (({ analytics, children, columnDefinitions: _columnDefinitions, customBulkEditorFields, enableDynamicRowHeight, enableGroupEditAndValidation, filterGroups, getRowId, initialTableConfig: _initialTableConfig, onBulkEditUpdate, onTableConfigChange, translations, enableCellTextSelection, }: React__default.PropsWithChildren<ClientSideDataTableProps>) => React__default.JSX.Element) & {
+declare const _default$1: (({ analytics, children, columnDefinitions: _columnDefinitions, customBulkEditorFields, enableDynamicRowHeight, enableGroupEditAndValidation, filterGroups, getRowId, initialTableConfig: _initialTableConfig, onBulkEditUpdate, onTableConfigChange, translations, enableCellTextSelection, localStoragePersistenceKey, }: React__default.PropsWithChildren<ClientSideDataTableProps>) => React__default.JSX.Element) & {
     BulkActions: React__default.FunctionComponent<React__default.PropsWithChildren<BulkActionProps>>;
     BulkEditActionButton: React__default.FunctionComponent<ActionButtonProps>;
     ConfigPanelButton: React__default.FC<{}>;
@@ -1372,7 +1374,7 @@ declare const MultiSelectQuickFilterRenderer: (props: FilterProps<any[]>) => Rea
 
 declare const SingleSelectQuickFilterRenderer: (props: FilterProps<any[]>) => React__default.JSX.Element;
 
-declare const _default: (({ analytics, children, columnDefinitions: _columnDefinitions, customBulkEditorFields, enableDynamicRowHeight, enableGroupEditAndValidation, filterGroups, getRowId, initialTableConfig: _initialTableConfig, onBulkEditUpdate, onServerSideDataRequest, onTableConfigChange, enableCellTextSelection, showExpandCollapseAllToggle, translations, }: React__default.PropsWithChildren<DataTableProps>) => React__default.JSX.Element) & {
+declare const _default: (({ analytics, children, columnDefinitions: _columnDefinitions, customBulkEditorFields, enableDynamicRowHeight, enableGroupEditAndValidation, filterGroups, getRowId, initialTableConfig: _initialTableConfig, onBulkEditUpdate, onServerSideDataRequest, onTableConfigChange, enableCellTextSelection, showExpandCollapseAllToggle, translations, localStoragePersistenceKey, }: React__default.PropsWithChildren<DataTableProps>) => React__default.JSX.Element) & {
     BulkActions: React__default.FunctionComponent<React__default.PropsWithChildren<BulkActionProps>>;
     BulkEditActionButton: React__default.FunctionComponent<ActionButtonProps>;
     ConfigPanelButton: React__default.FC<{}>;