@oneblink/apps-react 2.2.0 → 2.3.0-beta.2

package/dist/components/formStore/table/index.js

@@ -0,0 +1,194 @@
+import * as React from 'react';
+import clsx from 'clsx';
+import { Box, Paper, TableContainer, Tooltip } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
+import { FilterList as FilterListIcon, Warning as WarningIcon, ArrowDownward as SortingIcon, } from '@mui/icons-material';
+import { IsHoveringProvider } from '../../../hooks/useIsHovering';
+import { NoResourcesYet } from '../../NoResourcesYet';
+import FormStoreIcon from '../display/FormStoreIcon';
+import HeaderCellMoreButton from './HeaderCellMoreButton';
+const useStyles = makeStyles((theme) => ({
+    tooltip: {
+        zIndex: theme.zIndex.drawer,
+    },
+    sortingIcon: {
+        transition: theme.transitions.create('transform'),
+    },
+    sortingIconDescending: {
+        transform: 'rotate(180deg)',
+    },
+    table: {
+        display: 'inline-block',
+        '& .tbody .tr:last-child .tc': {
+            borderBottom: 0,
+        },
+        '& .tc': {
+            padding: theme.spacing(1),
+            borderBottomColor: theme.palette.divider,
+            borderBottom: '1px solid',
+            display: 'flex',
+            alignItems: 'center',
+            '&.is-clickable': {
+                cursor: 'pointer',
+                transition: theme.transitions.create('transform'),
+                '&:hover': {
+                    backgroundColor: theme.palette.action.hover,
+                },
+            },
+        },
+        '& .td': {
+            position: 'relative',
+            borderRight: '1px solid',
+            borderRightColor: theme.palette.divider,
+            overflowX: 'hidden',
+            // minus 1 to cater for the border
+            minHeight: `${parseInt(theme.spacing(5.5)) - 1}px`,
+            '&.is-resizing': {
+                borderRightStyle: 'dashed',
+            },
+        },
+        '& .th': {
+            position: 'relative',
+            fontWeight: theme.typography.fontWeightBold,
+            paddingRight: 0,
+            '& .th-content': {
+                flex: 1,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                borderRight: '1px solid',
+                borderRightColor: theme.palette.divider,
+                paddingRight: theme.spacing(),
+                '& .th-label': {
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    '& .th-icon': {
+                        marginLeft: theme.spacing(),
+                    },
+                },
+            },
+            '& .resizer': {
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                borderWidth: 0,
+                borderLeftStyle: 'solid',
+                borderRightStyle: 'solid',
+                borderColor: theme.palette.divider,
+                paddingTop: theme.spacing(),
+                paddingBottom: theme.spacing(),
+                paddingRight: `calc(${theme.spacing(1)} + 1px)`,
+                position: 'absolute',
+                right: 0,
+                top: theme.spacing(0.5),
+                bottom: theme.spacing(0.5),
+                transform: `translateX(calc(${theme.spacing(0.5)} + 1px))`,
+                zIndex: 1,
+                // prevents from scrolling while dragging on touch devices
+                touchAction: 'none',
+                '&:hover': {
+                    borderWidth: '1px',
+                },
+                '&.is-resizing': {
+                    borderWidth: '1px',
+                    borderColor: theme.palette.grey[700],
+                },
+            },
+        },
+    },
+}));
+function FormStoreTable({ getTableProps, getTableBodyProps, headerGroups, rows, prepareRow, isEmptyResults, onChangeFilters, }) {
+    const classes = useStyles();
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Paper, null,
+            React.createElement(TableContainer, null,
+                React.createElement("div", { className: classes.table, ...getTableProps() },
+                    React.createElement("div", { className: "thead" }, 
+                    // Loop over the header rows
+                    headerGroups.map((headerGroup) => (
+                    // Apply the header row props
+                    React.createElement("div", { ...headerGroup.getHeaderGroupProps(), className: "tr" }, 
+                    // Loop over the headers in each row
+                    headerGroup.headers.map((headerGroup) => {
+                        var _a, _b, _c, _d, _e;
+                        const sortingProperty = (_a = headerGroup.sorting) === null || _a === void 0 ? void 0 : _a.property;
+                        const sortingDirection = (_b = headerGroup.sorting) === null || _b === void 0 ? void 0 : _b.direction;
+                        return (React.createElement(Tooltip, { title: headerGroup.tooltip || '', arrow: true, key: headerGroup.id, classes: {
+                                popper: classes.tooltip,
+                            } },
+                            React.createElement("div", { className: clsx('th tc', {
+                                    'is-clickable': !!sortingProperty,
+                                }), onClick: sortingProperty
+                                    ? () => {
+                                        onChangeFilters((currentFilters) => {
+                                            switch (sortingDirection) {
+                                                case 'ascending': {
+                                                    return {
+                                                        ...currentFilters,
+                                                        sorting: [
+                                                            {
+                                                                property: sortingProperty,
+                                                                direction: 'descending',
+                                                            },
+                                                        ],
+                                                    };
+                                                }
+                                                case 'descending': {
+                                                    return {
+                                                        ...currentFilters,
+                                                        sorting: undefined,
+                                                    };
+                                                }
+                                                default: {
+                                                    return {
+                                                        ...currentFilters,
+                                                        sorting: [
+                                                            {
+                                                                property: sortingProperty,
+                                                                direction: 'ascending',
+                                                            },
+                                                        ],
+                                                    };
+                                                }
+                                            }
+                                        }, false);
+                                    }
+                                    : undefined, ...headerGroup.getHeaderProps() },
+                                React.createElement(IsHoveringProvider, { className: "th-content" },
+                                    React.createElement("div", { className: "th-label" },
+                                        React.createElement("span", null, headerGroup.headerText),
+                                        sortingDirection && (React.createElement(SortingIcon, { fontSize: "small", color: "primary", className: clsx('th-icon', classes.sortingIcon, {
+                                                [classes.sortingIconDescending]: sortingDirection === 'descending',
+                                            }) })),
+                                        ((_c = headerGroup.filter) === null || _c === void 0 ? void 0 : _c.isInvalid) ? (React.createElement(Tooltip, { title: ((_d = headerGroup.filter) === null || _d === void 0 ? void 0 : _d.validationMessage) ||
+                                                '' },
+                                            React.createElement(WarningIcon, { fontSize: "small", color: "error", className: "th-icon" }))) : ((_e = headerGroup.filter) === null || _e === void 0 ? void 0 : _e.value) ? (React.createElement(FilterListIcon, { fontSize: "small", color: "primary", className: "th-icon" })) : null),
+                                    React.createElement(HeaderCellMoreButton, { headerGroup: headerGroup, onHide: headerGroup.toggleHidden }),
+                                    React.createElement("div", { ...headerGroup.getResizerProps(), className: clsx('resizer', {
+                                            'is-resizing': headerGroup.isResizing,
+                                        }), onClick: (event) => {
+                                            event.stopPropagation();
+                                        } })))));
+                    }))))),
+                    !isEmptyResults ? (React.createElement("div", { ...getTableBodyProps(), className: "tbody" }, 
+                    // Loop over the table rows
+                    rows.map((row) => {
+                        // Prepare the row for display
+                        prepareRow(row);
+                        return (
+                        // Apply the row props
+                        React.createElement("div", { ...row.getRowProps(), className: "tr" }, 
+                        // Loop over the rows cells
+                        row.cells.map((cell) => {
+                            // Apply the cell props
+                            return (React.createElement(IsHoveringProvider, { ...cell.getCellProps(), className: clsx('td tc', {
+                                    'is-resizing': cell.column.isResizing,
+                                }) }, 
+                            // Render the cell contents
+                            cell.render('Cell')));
+                        })));
+                    }))) : (React.createElement(Box, { padding: 2 }))))),
+        isEmptyResults && (React.createElement(NoResourcesYet, { IconComponent: FormStoreIcon, title: "No Records Found..." }, "There are no Submissions matching your filters."))));
+}
+export default React.memo(FormStoreTable);
+//# sourceMappingURL=index.js.map

package/dist/components/formStore/table/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/formStore/table/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { TableInstance } from 'react-table'\nimport clsx from 'clsx'\nimport { Box, Paper, TableContainer, Tooltip } from '@mui/material'\nimport makeStyles from '@mui/styles/makeStyles'\nimport {\n  FilterList as FilterListIcon,\n  Warning as WarningIcon,\n  ArrowDownward as SortingIcon,\n} from '@mui/icons-material'\nimport { SubmissionTypes } from '@oneblink/types'\nimport { IsHoveringProvider } from '../../../hooks/useIsHovering'\nimport { NoResourcesYet } from '../../NoResourcesYet'\nimport FormStoreIcon from '../display/FormStoreIcon'\nimport HeaderCellMoreButton from './HeaderCellMoreButton'\nimport { OnChangeFilters } from '../../../hooks/useInfiniteScrollDataLoad'\nimport { formStoreService } from '@oneblink/apps'\n\nconst useStyles = makeStyles((theme) => ({\n  tooltip: {\n    zIndex: theme.zIndex.drawer,\n  },\n  sortingIcon: {\n    transition: theme.transitions.create('transform'),\n  },\n  sortingIconDescending: {\n    transform: 'rotate(180deg)',\n  },\n  table: {\n    display: 'inline-block',\n    '& .tbody .tr:last-child .tc': {\n      borderBottom: 0,\n    },\n    '& .tc': {\n      padding: theme.spacing(1),\n      borderBottomColor: theme.palette.divider,\n      borderBottom: '1px solid',\n      display: 'flex',\n      alignItems: 'center',\n      '&.is-clickable': {\n        cursor: 'pointer',\n        transition: theme.transitions.create('transform'),\n        '&:hover': {\n          backgroundColor: theme.palette.action.hover,\n        },\n      },\n    },\n    '& .td': {\n      position: 'relative',\n      borderRight: '1px solid',\n      borderRightColor: theme.palette.divider,\n      overflowX: 'hidden',\n      // minus 1 to cater for the border\n      minHeight: `${parseInt(theme.spacing(5.5)) - 1}px`,\n      '&.is-resizing': {\n        borderRightStyle: 'dashed',\n      },\n    },\n    '& .th': {\n      position: 'relative',\n      fontWeight: theme.typography.fontWeightBold,\n      paddingRight: 0,\n      '& .th-content': {\n        flex: 1,\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'space-between',\n        borderRight: '1px solid',\n        borderRightColor: theme.palette.divider,\n        paddingRight: theme.spacing(),\n        '& .th-label': {\n          display: 'inline-flex',\n          alignItems: 'center',\n          '& .th-icon': {\n            marginLeft: theme.spacing(),\n          },\n        },\n      },\n      '& .resizer': {\n        display: 'inline-flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        borderWidth: 0,\n        borderLeftStyle: 'solid',\n        borderRightStyle: 'solid',\n        borderColor: theme.palette.divider,\n        paddingTop: theme.spacing(),\n        paddingBottom: theme.spacing(),\n        paddingRight: `calc(${theme.spacing(1)} + 1px)`,\n        position: 'absolute',\n        right: 0,\n        top: theme.spacing(0.5),\n        bottom: theme.spacing(0.5),\n        transform: `translateX(calc(${theme.spacing(0.5)} + 1px))`,\n        zIndex: 1,\n        // prevents from scrolling while dragging on touch devices\n        touchAction: 'none',\n        '&:hover': {\n          borderWidth: '1px',\n        },\n        '&.is-resizing': {\n          borderWidth: '1px',\n          borderColor: theme.palette.grey[700],\n        },\n      },\n    },\n  },\n}))\n\ntype FormStoreTableInstance = TableInstance<SubmissionTypes.FormStoreRecord>\n\nfunction FormStoreTable({\n  getTableProps,\n  getTableBodyProps,\n  headerGroups,\n  rows,\n  prepareRow,\n  isEmptyResults,\n  onChangeFilters,\n}: {\n  getTableProps: FormStoreTableInstance['getTableProps']\n  getTableBodyProps: FormStoreTableInstance['getTableBodyProps']\n  headerGroups: FormStoreTableInstance['headerGroups']\n  rows: FormStoreTableInstance['rows']\n  prepareRow: FormStoreTableInstance['prepareRow']\n  isEmptyResults: boolean\n  onChangeFilters: OnChangeFilters<formStoreService.FormStoreFilters>\n}) {\n  const classes = useStyles()\n\n  return (\n    <>\n      <Paper>\n        <TableContainer>\n          <div className={classes.table} {...getTableProps()}>\n            <div className=\"thead\">\n              {\n                // Loop over the header rows\n                headerGroups.map((headerGroup) => (\n                  // Apply the header row props\n                  <div {...headerGroup.getHeaderGroupProps()} className=\"tr\">\n                    {\n                      // Loop over the headers in each row\n                      headerGroup.headers.map((headerGroup) => {\n                        const sortingProperty = headerGroup.sorting?.property\n                        const sortingDirection = headerGroup.sorting?.direction\n\n                        return (\n                          <Tooltip\n                            title={headerGroup.tooltip || ''}\n                            arrow\n                            key={headerGroup.id}\n                            classes={{\n                              popper: classes.tooltip,\n                            }}\n                          >\n                            <div\n                              className={clsx('th tc', {\n                                'is-clickable': !!sortingProperty,\n                              })}\n                              onClick={\n                                sortingProperty\n                                  ? () => {\n                                      onChangeFilters((currentFilters) => {\n                                        switch (sortingDirection) {\n                                          case 'ascending': {\n                                            return {\n                                              ...currentFilters,\n                                              sorting: [\n                                                {\n                                                  property: sortingProperty,\n                                                  direction: 'descending',\n                                                },\n                                              ],\n                                            }\n                                          }\n                                          case 'descending': {\n                                            return {\n                                              ...currentFilters,\n                                              sorting: undefined,\n                                            }\n                                          }\n                                          default: {\n                                            return {\n                                              ...currentFilters,\n                                              sorting: [\n                                                {\n                                                  property: sortingProperty,\n                                                  direction: 'ascending',\n                                                },\n                                              ],\n                                            }\n                                          }\n                                        }\n                                      }, false)\n                                    }\n                                  : undefined\n                              }\n                              // Apply the header cell props\n                              {...headerGroup.getHeaderProps()}\n                            >\n                              <IsHoveringProvider className=\"th-content\">\n                                <div className=\"th-label\">\n                                  <span>{headerGroup.headerText}</span>\n                                  {sortingDirection && (\n                                    <SortingIcon\n                                      fontSize=\"small\"\n                                      color=\"primary\"\n                                      className={clsx(\n                                        'th-icon',\n                                        classes.sortingIcon,\n                                        {\n                                          [classes.sortingIconDescending]:\n                                            sortingDirection === 'descending',\n                                        },\n                                      )}\n                                    />\n                                  )}\n                                  {headerGroup.filter?.isInvalid ? (\n                                    <Tooltip\n                                      title={\n                                        headerGroup.filter?.validationMessage ||\n                                        ''\n                                      }\n                                    >\n                                      <WarningIcon\n                                        fontSize=\"small\"\n                                        color=\"error\"\n                                        className=\"th-icon\"\n                                      />\n                                    </Tooltip>\n                                  ) : headerGroup.filter?.value ? (\n                                    <FilterListIcon\n                                      fontSize=\"small\"\n                                      color=\"primary\"\n                                      className=\"th-icon\"\n                                    />\n                                  ) : null}\n                                </div>\n                                <HeaderCellMoreButton\n                                  headerGroup={headerGroup}\n                                  onHide={headerGroup.toggleHidden}\n                                />\n                                <div\n                                  {...headerGroup.getResizerProps()}\n                                  className={clsx('resizer', {\n                                    'is-resizing': headerGroup.isResizing,\n                                  })}\n                                  onClick={(event) => {\n                                    event.stopPropagation()\n                                  }}\n                                />\n                              </IsHoveringProvider>\n                            </div>\n                          </Tooltip>\n                        )\n                      })\n                    }\n                  </div>\n                ))\n              }\n            </div>\n            {!isEmptyResults ? (\n              <div {...getTableBodyProps()} className=\"tbody\">\n                {\n                  // Loop over the table rows\n                  rows.map((row) => {\n                    // Prepare the row for display\n                    prepareRow(row)\n                    return (\n                      // Apply the row props\n                      <div {...row.getRowProps()} className=\"tr\">\n                        {\n                          // Loop over the rows cells\n                          row.cells.map((cell) => {\n                            // Apply the cell props\n                            return (\n                              <IsHoveringProvider\n                                {...cell.getCellProps()}\n                                className={clsx('td tc', {\n                                  'is-resizing': cell.column.isResizing,\n                                })}\n                              >\n                                {\n                                  // Render the cell contents\n                                  cell.render('Cell')\n                                }\n                              </IsHoveringProvider>\n                            )\n                          })\n                        }\n                      </div>\n                    )\n                  })\n                }\n              </div>\n            ) : (\n              <Box padding={2} />\n            )}\n          </div>\n        </TableContainer>\n      </Paper>\n\n      {isEmptyResults && (\n        <NoResourcesYet\n          IconComponent={FormStoreIcon}\n          title=\"No Records Found...\"\n        >\n          There are no Submissions matching your filters.\n        </NoResourcesYet>\n      )}\n    </>\n  )\n}\n\nexport default React.memo(FormStoreTable)\n"]}

package/dist/components/formStore/table/useFormStoreTable.d.ts

@@ -1,52 +1,52 @@
-import { FormStoreRecord } from '@oneblink/types/typescript/submissions';
-import { TableState } from 'react-table';
-import { FormTypes } from '@oneblink/types';
-import { OnChangeFilters } from '../../../hooks/useInfiniteScrollDataLoad';
-import { formStoreService } from '@oneblink/apps';
-export default function useFormStoreTable({ form, formStoreRecords, parameters, onChangeParameters, onRefresh, submissionIdValidationMessage, }: {
-    formStoreRecords: FormStoreRecord[];
-    form: FormTypes.Form;
-    parameters: formStoreService.FormStoreParameters;
-    onChangeParameters: OnChangeFilters<formStoreService.FormStoreParameters>;
-    onRefresh: () => void;
-    submissionIdValidationMessage?: string;
-}): {
-    readonly form: FormTypes.Form;
-    readonly parameters: formStoreService.FormStoreParameters;
-    readonly onChangeParameters: OnChangeFilters<formStoreService.FormStoreParameters>;
-    readonly onRefresh: () => void;
-    readonly submissionIdValidationMessage: string | undefined;
-    readonly data: readonly FormStoreRecord[];
-    readonly initialState?: Partial<TableState<FormStoreRecord>> | undefined;
-    readonly stateReducer?: ((newState: TableState<FormStoreRecord>, action: import("react-table").ActionType, previousState: TableState<FormStoreRecord>, instance?: import("react-table").TableInstance<FormStoreRecord> | undefined) => TableState<FormStoreRecord>) | undefined;
-    readonly useControlledState?: ((state: TableState<FormStoreRecord>, meta: import("react-table").MetaBase<FormStoreRecord>) => TableState<FormStoreRecord>) | undefined;
-    readonly defaultColumn?: Partial<import("react-table").Column<FormStoreRecord>> | undefined;
-    readonly getSubRows?: ((originalRow: FormStoreRecord, relativeIndex: number) => FormStoreRecord[]) | undefined;
-    readonly getRowId?: ((originalRow: FormStoreRecord, relativeIndex: number, parent?: import("react-table").Row<FormStoreRecord> | undefined) => string) | undefined;
-    readonly autoResetHiddenColumns?: boolean | undefined;
-    readonly disableResizing?: boolean | undefined;
-    readonly autoResetResize?: boolean | undefined;
-    readonly state: TableState<FormStoreRecord>;
-    readonly plugins: import("react-table").PluginHook<FormStoreRecord>[];
-    readonly dispatch: import("react-table").TableDispatch<any>;
-    readonly columns: import("react-table").ColumnInstance<FormStoreRecord>[];
-    readonly allColumns: import("react-table").ColumnInstance<FormStoreRecord>[];
-    readonly visibleColumns: import("react-table").ColumnInstance<FormStoreRecord>[];
-    readonly headerGroups: import("react-table").HeaderGroup<FormStoreRecord>[];
-    readonly footerGroups: import("react-table").HeaderGroup<FormStoreRecord>[];
-    readonly headers: import("react-table").ColumnInstance<FormStoreRecord>[];
-    readonly flatHeaders: import("react-table").ColumnInstance<FormStoreRecord>[];
-    readonly rows: import("react-table").Row<FormStoreRecord>[];
-    readonly rowsById: Record<string, import("react-table").Row<FormStoreRecord>>;
-    readonly getTableProps: (propGetter?: import("react-table").TablePropGetter<FormStoreRecord> | undefined) => import("react-table").TableProps;
-    readonly getTableBodyProps: (propGetter?: import("react-table").TableBodyPropGetter<FormStoreRecord> | undefined) => import("react-table").TableBodyProps;
-    readonly prepareRow: (row: import("react-table").Row<FormStoreRecord>) => void;
-    readonly flatRows: import("react-table").Row<FormStoreRecord>[];
-    readonly totalColumnsWidth: number;
-    readonly allColumnsHidden: boolean;
-    readonly toggleHideColumn: (columnId: string, value?: boolean | undefined) => void;
-    readonly setHiddenColumns: (param: string[] | ((oldHidden: string[]) => string[])) => void;
-    readonly toggleHideAllColumns: (value?: boolean | undefined) => void;
-    readonly getToggleHideAllColumnsProps: (props?: Partial<import("react-table").TableToggleHideAllColumnProps> | undefined) => import("react-table").TableToggleHideAllColumnProps;
-    readonly getHooks: () => import("react-table").Hooks<FormStoreRecord>;
-};
+import { FormStoreRecord } from '@oneblink/types/typescript/submissions';
+import { TableState } from 'react-table';
+import { FormTypes } from '@oneblink/types';
+import { OnChangeFilters } from '../../../hooks/useInfiniteScrollDataLoad';
+import { formStoreService } from '@oneblink/apps';
+export default function useFormStoreTable({ form, formStoreRecords, parameters, onChangeParameters, onRefresh, submissionIdValidationMessage, }: {
+    formStoreRecords: FormStoreRecord[];
+    form: FormTypes.Form;
+    parameters: formStoreService.FormStoreParameters;
+    onChangeParameters: OnChangeFilters<formStoreService.FormStoreParameters>;
+    onRefresh: () => void;
+    submissionIdValidationMessage?: string;
+}): {
+    readonly form: FormTypes.Form;
+    readonly parameters: formStoreService.FormStoreParameters;
+    readonly onChangeParameters: OnChangeFilters<formStoreService.FormStoreParameters>;
+    readonly onRefresh: () => void;
+    readonly submissionIdValidationMessage: string | undefined;
+    readonly data: readonly FormStoreRecord[];
+    readonly initialState?: Partial<TableState<FormStoreRecord>> | undefined;
+    readonly stateReducer?: ((newState: TableState<FormStoreRecord>, action: import("react-table").ActionType, previousState: TableState<FormStoreRecord>, instance?: import("react-table").TableInstance<FormStoreRecord> | undefined) => TableState<FormStoreRecord>) | undefined;
+    readonly useControlledState?: ((state: TableState<FormStoreRecord>, meta: import("react-table").MetaBase<FormStoreRecord>) => TableState<FormStoreRecord>) | undefined;
+    readonly defaultColumn?: Partial<import("react-table").Column<FormStoreRecord>> | undefined;
+    readonly getSubRows?: ((originalRow: FormStoreRecord, relativeIndex: number) => FormStoreRecord[]) | undefined;
+    readonly getRowId?: ((originalRow: FormStoreRecord, relativeIndex: number, parent?: import("react-table").Row<FormStoreRecord> | undefined) => string) | undefined;
+    readonly autoResetHiddenColumns?: boolean | undefined;
+    readonly disableResizing?: boolean | undefined;
+    readonly autoResetResize?: boolean | undefined;
+    readonly state: TableState<FormStoreRecord>;
+    readonly plugins: import("react-table").PluginHook<FormStoreRecord>[];
+    readonly dispatch: import("react-table").TableDispatch<any>;
+    readonly columns: import("react-table").ColumnInstance<FormStoreRecord>[];
+    readonly allColumns: import("react-table").ColumnInstance<FormStoreRecord>[];
+    readonly visibleColumns: import("react-table").ColumnInstance<FormStoreRecord>[];
+    readonly headerGroups: import("react-table").HeaderGroup<FormStoreRecord>[];
+    readonly footerGroups: import("react-table").HeaderGroup<FormStoreRecord>[];
+    readonly headers: import("react-table").ColumnInstance<FormStoreRecord>[];
+    readonly flatHeaders: import("react-table").ColumnInstance<FormStoreRecord>[];
+    readonly rows: import("react-table").Row<FormStoreRecord>[];
+    readonly rowsById: Record<string, import("react-table").Row<FormStoreRecord>>;
+    readonly getTableProps: (propGetter?: import("react-table").TablePropGetter<FormStoreRecord> | undefined) => import("react-table").TableProps;
+    readonly getTableBodyProps: (propGetter?: import("react-table").TableBodyPropGetter<FormStoreRecord> | undefined) => import("react-table").TableBodyProps;
+    readonly prepareRow: (row: import("react-table").Row<FormStoreRecord>) => void;
+    readonly flatRows: import("react-table").Row<FormStoreRecord>[];
+    readonly totalColumnsWidth: number;
+    readonly allColumnsHidden: boolean;
+    readonly toggleHideColumn: (columnId: string, value?: boolean | undefined) => void;
+    readonly setHiddenColumns: (param: string[] | ((oldHidden: string[]) => string[])) => void;
+    readonly toggleHideAllColumns: (value?: boolean | undefined) => void;
+    readonly getToggleHideAllColumnsProps: (props?: Partial<import("react-table").TableToggleHideAllColumnProps> | undefined) => import("react-table").TableToggleHideAllColumnProps;
+    readonly getHooks: () => import("react-table").Hooks<FormStoreRecord>;
+};