@etsoo/react 1.4.19 → 1.4.23

package/lib/components/GridLoader.d.ts

@@ -88,6 +88,10 @@ export interface GridLoaderStates<T> extends GridLoadDataProps {
      * Last loaded items
      */
     lastLoadedItems?: number;
+    /**
+     * All loaded items count
+     */
+    loadedItems: number;
     /**
      * Has next page?
      */
@@ -97,9 +101,9 @@ export interface GridLoaderStates<T> extends GridLoadDataProps {
      */
     isNextPageLoading: boolean;
     /**
-     * Current rows
+     * Is mounted
      */
-    rows: T[];
+    isMounted?: boolean;
     /**
      * Selected items of id
      */

package/lib/components/ScrollerGrid.d.ts

@@ -24,7 +24,7 @@ export interface ScrollerGridProps<T> extends GridLoader<T>, Omit<VariableSizeGr
     /**
      * Footer renderer
      */
-    footerRenderer?: (states: GridLoaderStates<T>) => React.ReactNode;
+    footerRenderer?: (rows: T[], states: GridLoaderStates<T>) => React.ReactNode;
     /**
      * Header renderer
      */

package/lib/components/ScrollerGrid.js

@@ -8,22 +8,26 @@ import { VariableSizeGrid } from 'react-window';
 export const ScrollerGrid = (props) => {
     // Destruct
     const { autoLoad = true, defaultOrderBy, defaultOrderByAsc, footerRenderer, headerRenderer, itemRenderer, idField = 'id', loadBatchSize, loadData, mRef, onItemsRendered, onSelectChange, rowHeight = 53, threshold = 6, width, ...rest } = props;
-    // States
-    const [state, stateUpdate] = React.useReducer((currentState, newState) => {
-        return { ...currentState, ...newState };
-    }, {
+    // Rows
+    const [rows, updateRows] = React.useState([]);
+    const setRows = (rows) => {
+        state.loadedItems = rows.length;
+        updateRows(rows);
+    };
+    // Refs
+    const refs = React.useRef({
         autoLoad,
         currentPage: 0,
         hasNextPage: true,
         isNextPageLoading: false,
         orderBy: defaultOrderBy,
         orderByAsc: defaultOrderByAsc,
-        rows: [],
         batchSize: 10,
+        loadedItems: 0,
         selectedItems: []
     });
-    const isMounted = React.useRef(true);
-    const ref = React.createRef();
+    const state = refs.current;
+    const ref = React.useRef(null);
     // Load data
     const loadDataLocal = (pageAdd = 1) => {
         // Prevent multiple loadings
@@ -31,9 +35,8 @@ export const ScrollerGrid = (props) => {
             return;
         // Update state
         state.isNextPageLoading = true;
-        // stateUpdate({ isNextPageLoading: true });
         // Parameters
-        const { currentPage, batchSize, orderBy, orderByAsc, data } = state;
+        const { currentPage, batchSize, orderBy, orderByAsc, data, isMounted } = state;
         const loadProps = {
             currentPage,
             batchSize,
@@ -42,41 +45,37 @@ export const ScrollerGrid = (props) => {
             data
         };
         loadData(loadProps).then((result) => {
-            if (result == null || !isMounted.current) {
+            state.isMounted = true;
+            if (result == null || isMounted === false) {
                 return;
             }
             const newItems = result.length;
+            state.lastLoadedItems = newItems;
+            state.isNextPageLoading = false;
+            state.hasNextPage = newItems >= batchSize;
             if (pageAdd === 0) {
                 // New items
-                const rows = state.lastLoadedItems
-                    ? state.rows
-                        .splice(state.rows.length - state.lastLoadedItems, state.lastLoadedItems)
+                const newRows = state.lastLoadedItems
+                    ? [...rows]
+                        .splice(rows.length - state.lastLoadedItems, state.lastLoadedItems)
                         .concat(result)
                     : result;
-                // Refresh current page
-                stateUpdate({
-                    rows,
-                    lastLoadedItems: newItems,
-                    isNextPageLoading: false,
-                    hasNextPage: newItems >= batchSize
-                });
+                // Update rows
+                setRows(newRows);
             }
             else {
-                stateUpdate({
-                    rows: state.rows.concat(result),
-                    lastLoadedItems: newItems,
-                    isNextPageLoading: false,
-                    currentPage: state.currentPage + pageAdd,
-                    hasNextPage: newItems >= batchSize
-                });
+                // Set current page
+                state.currentPage = state.currentPage + pageAdd;
+                // Update rows
+                setRows([...rows, ...result]);
             }
         });
     };
     // Item renderer
     const itemRendererLocal = (itemProps, state) => {
         // Custom render
-        const data = itemProps.rowIndex < state.rows.length
-            ? state.rows[itemProps.rowIndex]
+        const data = itemProps.rowIndex < rows.length
+            ? rows[itemProps.rowIndex]
             : undefined;
         return itemRenderer({
             ...itemProps,
@@ -87,7 +86,7 @@ export const ScrollerGrid = (props) => {
     // Local items renderer callback
     const onItemsRenderedLocal = (props) => {
         // No items, means no necessary to load more data during reset
-        const itemCount = state.rows.length;
+        const itemCount = rows.length;
         if (itemCount > 0 &&
             props.visibleRowStopIndex + threshold > itemCount) {
             // Auto load next page
@@ -99,16 +98,18 @@ export const ScrollerGrid = (props) => {
     };
     // Reset the state and load again
     const reset = (add) => {
-        const state = {
+        const resetState = {
             autoLoad: true,
             currentPage: 0,
+            loadedItems: 0,
             hasNextPage: true,
             isNextPageLoading: false,
             lastLoadedItems: undefined,
-            rows: [],
             ...add
         };
-        stateUpdate(state);
+        Object.assign(state, resetState);
+        // Reset items
+        setRows([]);
     };
     React.useImperativeHandle(mRef, () => ({
         scrollTo(params) {
@@ -122,14 +123,13 @@ export const ScrollerGrid = (props) => {
         select(rowIndex) {
             // Select only one item
             const selectedItems = state.selectedItems;
-            selectedItems[0] = state.rows[rowIndex];
+            selectedItems[0] = rows[rowIndex];
             if (onSelectChange)
                 onSelectChange(selectedItems);
-            stateUpdate({ selectedItems });
         },
         selectAll(checked) {
             const selectedItems = state.selectedItems;
-            state.rows.forEach((row) => {
+            rows.forEach((row) => {
                 const index = selectedItems.findIndex((selectedItem) => selectedItem[idField] === row[idField]);
                 if (checked) {
                     if (index === -1)
@@ -141,7 +141,6 @@ export const ScrollerGrid = (props) => {
             });
             if (onSelectChange)
                 onSelectChange(selectedItems);
-            stateUpdate({ selectedItems });
         },
         selectItem(item, checked) {
             const selectedItems = state.selectedItems;
@@ -156,7 +155,6 @@ export const ScrollerGrid = (props) => {
             }
             if (onSelectChange)
                 onSelectChange(selectedItems);
-            stateUpdate({ selectedItems });
         },
         reset,
         resetAfterColumnIndex(index, shouldForceUpdate) {
@@ -171,14 +169,23 @@ export const ScrollerGrid = (props) => {
             var _a;
             (_a = ref.current) === null || _a === void 0 ? void 0 : _a.resetAfterRowIndex(index, shouldForceUpdate);
         }
-    }), [state.rows, state.selectedItems]);
+    }), [rows]);
     React.useEffect(() => {
         return () => {
-            isMounted.current = false;
+            state.isMounted = false;
         };
     }, []);
+    // Force update to work with the new width
+    React.useEffect(() => {
+        var _a;
+        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.resetAfterIndices({
+            columnIndex: 0,
+            rowIndex: 0,
+            shouldForceUpdate: true
+        });
+    }, [width]);
     // Destruct state
-    const { autoLoad: stateAutoLoad, rows, hasNextPage, currentPage } = state;
+    const { autoLoad: stateAutoLoad, hasNextPage, currentPage } = state;
     const rowLength = rows.length;
     // Row count
     const rowCount = hasNextPage ? rowLength + 1 : rowLength;
@@ -189,12 +196,12 @@ export const ScrollerGrid = (props) => {
     return (React.createElement(React.Fragment, null,
         headerRenderer && headerRenderer(state),
         React.createElement(VariableSizeGrid, { itemKey: ({ columnIndex, rowIndex }) => {
-                const data = state.rows[rowIndex];
+                const data = rows[rowIndex];
                 if (data == null)
                     return [rowIndex, columnIndex].join(',');
                 return [data[idField], columnIndex].join(',');
             }, onItemsRendered: onItemsRenderedLocal, ref: ref, rowCount: rowCount, rowHeight: typeof rowHeight === 'function'
                 ? rowHeight
                 : () => rowHeight, style: { overflowX: 'hidden' }, width: width, ...rest }, (props) => itemRendererLocal(props, state)),
-        footerRenderer && footerRenderer(state)));
+        footerRenderer && footerRenderer(rows, state)));
 };

package/lib/components/ScrollerList.js

@@ -26,21 +26,25 @@ export const ScrollerList = (props) => {
     const listRef = React.useRef();
     const outerRef = React.useRef();
     const refs = useCombinedRefs(oRef, outerRef);
+    // Rows
+    const [rows, updateRows] = React.useState([]);
+    const setRows = (rows) => {
+        state.loadedItems = rows.length;
+        updateRows(rows);
+    };
     // States
-    const [state, stateUpdate] = React.useReducer((currentState, newState) => {
-        return { ...currentState, ...newState };
-    }, {
+    const stateRefs = React.useRef({
         autoLoad,
         currentPage: 0,
+        loadedItems: 0,
         hasNextPage: true,
         isNextPageLoading: false,
         orderBy: defaultOrderBy,
         orderByAsc: defaultOrderByAsc,
-        rows: [],
         batchSize: GridSizeGet(loadBatchSize, height),
         selectedItems: []
     });
-    const isMounted = React.useRef(true);
+    const state = stateRefs.current;
     // Load data
     const loadDataLocal = (pageAdd = 1) => {
         // Prevent multiple loadings
@@ -48,9 +52,8 @@ export const ScrollerList = (props) => {
             return;
         // Update state
         state.isNextPageLoading = true;
-        // stateUpdate({ isNextPageLoading: true });
         // Parameters
-        const { currentPage, batchSize, orderBy, orderByAsc, data } = state;
+        const { currentPage, batchSize, orderBy, orderByAsc, data, isMounted } = state;
         const loadProps = {
             currentPage,
             batchSize,
@@ -59,33 +62,28 @@ export const ScrollerList = (props) => {
             data
         };
         loadData(loadProps).then((result) => {
-            if (result == null || !isMounted.current) {
+            state.isMounted = true;
+            if (result == null || isMounted === false) {
                 return;
             }
             const newItems = result.length;
+            state.lastLoadedItems = newItems;
+            state.hasNextPage = newItems >= loadBatchSize;
+            state.isNextPageLoading = false;
             if (pageAdd === 0) {
                 // New items
-                const rows = state.lastLoadedItems
-                    ? state.rows
-                        .splice(state.rows.length - state.lastLoadedItems, state.lastLoadedItems)
+                const newRows = state.lastLoadedItems
+                    ? [...rows]
+                        .splice(rows.length - state.lastLoadedItems, state.lastLoadedItems)
                         .concat(result)
                     : result;
-                // Refresh current page
-                stateUpdate({
-                    rows,
-                    lastLoadedItems: newItems,
-                    hasNextPage: newItems >= loadBatchSize,
-                    isNextPageLoading: false
-                });
+                // Update rows
+                setRows(newRows);
             }
             else {
-                stateUpdate({
-                    rows: state.rows.concat(result),
-                    lastLoadedItems: newItems,
-                    currentPage: state.currentPage + pageAdd,
-                    hasNextPage: newItems >= loadBatchSize,
-                    isNextPageLoading: false
-                });
+                state.currentPage = state.currentPage + pageAdd;
+                // Update rows
+                setRows([...rows, ...result]);
             }
         });
     };
@@ -93,7 +91,7 @@ export const ScrollerList = (props) => {
         // Custom render
         return itemRenderer({
             ...itemProps,
-            data: state.rows[itemProps.index]
+            data: rows[itemProps.index]
         });
     };
     // Update scroll location
@@ -112,16 +110,16 @@ export const ScrollerList = (props) => {
                 loadDataLocal(0);
             },
             reset(add) {
-                // Reset state, will load data soon
-                stateUpdate({
+                const resetState = {
                     autoLoad: true,
-                    rows: [],
                     lastLoadedItems: undefined,
+                    loadedItems: 0,
                     currentPage: 0,
                     hasNextPage: true,
                     isNextPageLoading: false,
                     ...add
-                });
+                };
+                Object.assign(state, resetState);
             },
             scrollTo(scrollOffset) {
                 refMethods.scrollTo(scrollOffset);
@@ -157,11 +155,11 @@ export const ScrollerList = (props) => {
                 window.cancelAnimationFrame(requestAnimationFrameSeed);
             // Remove scroll event
             window.removeEventListener('scroll', handleWindowScroll);
-            isMounted.current = false;
+            state.isMounted = false;
         };
     }, []);
     // Destruct state
-    const { autoLoad: stateAutoLoad, rows, hasNextPage, currentPage } = state;
+    const { autoLoad: stateAutoLoad, hasNextPage, currentPage } = state;
     const rowCount = rows.length;
     // Local items renderer callback
     const onItemsRenderedLocal = (props) => {

package/lib/mu/DataGridEx.d.ts

@@ -40,7 +40,7 @@ export interface DataGridExProps<T extends Record<string, any>> extends Omit<Scr
     /**
      * Footer item renderer
      */
-    footerItemRenderer?: (props: DataGridExFooterItemRendererProps<T>) => React.ReactNode;
+    footerItemRenderer?: (rows: T[], props: DataGridExFooterItemRendererProps<T>) => React.ReactNode;
     /**
      * Header height
      * @default 56

package/lib/mu/DataGridEx.js

@@ -5,8 +5,6 @@ import React from 'react';
 import { GridAlignGet } from '../components/GridColumn';
 import { ScrollerGrid } from '../components/ScrollerGrid';
 import useCombinedRefs from '../uses/useCombinedRefs';
-import { useDimensions } from '../uses/useDimensions';
-import { useWindowSize } from '../uses/useWindowSize';
 import { DataGridRenderers } from './DataGridRenderers';
 // Borders
 const boldBorder = '2px solid rgba(224, 224, 224, 1)';
@@ -107,7 +105,7 @@ export function DataGridEx(props) {
                 React.createElement(Box, { className: "DataGridEx-Cell", onMouseEnter: handleMouseEnter, ...cellProps }, sortLabel)));
         })));
     };
-    function defaultFooterRenderer(states) {
+    function defaultFooterRenderer(rows, states) {
         return (React.createElement(Box, { className: "DataGridEx-Footer", display: "flex", alignItems: "center", borderTop: thinBorder, marginTop: "1px", minWidth: widthCalculator.total, height: bottomHeight - 1 }, columns.map((column, index) => {
             // Destruct
             const { align, field, type } = column;
@@ -115,7 +113,7 @@ export function DataGridEx(props) {
             const cellProps = {};
             // Cell
             const cell = footerItemRenderer
-                ? footerItemRenderer({
+                ? footerItemRenderer(rows, {
                     column,
                     index,
                     states,
@@ -141,7 +139,7 @@ export function DataGridEx(props) {
                 };
                 return (React.createElement(Checkbox, { color: "primary", checked: selected, onChange: (_event, checked) => {
                         var _a;
-                        (_a = state.ref) === null || _a === void 0 ? void 0 : _a.selectItem(data, checked);
+                        (_a = refs.current.ref) === null || _a === void 0 ? void 0 : _a.selectItem(data, checked);
                     } }));
             },
             headerCellRenderer: ({ cellProps, states }) => {
@@ -151,7 +149,7 @@ export function DataGridEx(props) {
                     padding: `${hpad}px 4px ${hpad - 1}px 4px!important`
                 };
                 return (React.createElement(Checkbox, { color: "primary", indeterminate: states.selectedItems.length > 0 &&
-                        states.selectedItems.length < states.rows.length, checked: states.selectedItems.length > 0, onChange: (_event, checked) => { var _a; return (_a = state.ref) === null || _a === void 0 ? void 0 : _a.selectAll(checked); } }));
+                        states.selectedItems.length < states.loadedItems, checked: states.selectedItems.length > 0, onChange: (_event, checked) => { var _a; return (_a = refs.current.ref) === null || _a === void 0 ? void 0 : _a.selectAll(checked); } }));
             }
         };
         // Update to the latest version
@@ -162,24 +160,20 @@ export function DataGridEx(props) {
             columns.unshift(cbColumn);
         }
     }
-    // States
-    const [state, stateUpdate] = React.useReducer((currentState, newState) => {
-        return { ...currentState, ...newState };
-    }, {
-        gridWidth: width
-    });
-    const refs = useCombinedRefs(mRef, (ref) => {
+    const refs = React.useRef({});
+    const mRefLocal = useCombinedRefs(mRef, (ref) => {
         if (ref == null)
             return;
-        state.ref = ref;
+        refs.current.ref = ref;
     });
     // New sort
     const handleSort = (field, asc) => {
         reset({ orderBy: field, orderByAsc: asc });
     };
+    // Reset
     const reset = (add) => {
         var _a;
-        (_a = state.ref) === null || _a === void 0 ? void 0 : _a.reset(add);
+        (_a = refs.current.ref) === null || _a === void 0 ? void 0 : _a.reset(add);
     };
     // Show hover tooltip for trucated text
     const handleMouseEnter = (event) => {
@@ -272,55 +266,35 @@ export function DataGridEx(props) {
     };
     // Column width calculator
     const widthCalculator = React.useMemo(() => DataGridExCalColumns(columns), [columns]);
-    // Grid width
-    const { gridWidth } = state;
     // Column width
     const columnWidth = React.useCallback((index) => {
         // Ignore null case
-        if (gridWidth == null)
+        if (width == null)
             return 0;
         // Column
         const column = columns[index];
         if (column.width != null)
             return column.width;
         // More space
-        const leftWidth = gridWidth -
+        const leftWidth = width -
             widthCalculator.total -
-            (gridWidth < 800 ? 0 : scrollbarSize);
+            (width < 800 ? 0 : scrollbarSize);
         // Shared width
         const sharedWidth = leftWidth > 0 ? leftWidth / widthCalculator.unset : 0;
         return (column.minWidth || minWidth) + sharedWidth;
-    }, [columns, gridWidth]);
+    }, [columns, width]);
     // Table
     const table = React.useMemo(() => {
         var _a;
-        if (gridWidth != null) {
-            const defaultOrderByAsc = defaultOrderBy
-                ? (_a = columns.find((column) => column.field === defaultOrderBy)) === null || _a === void 0 ? void 0 : _a.sortAsc
-                : undefined;
-            return (React.createElement(ScrollerGrid, { className: Utils.mergeClasses('DataGridEx-Body', 'DataGridEx-CustomBar', className, createGridStyle(alternatingColors, selectedColor, hoverColor)), columnCount: columns.length, columnWidth: columnWidth, defaultOrderBy: defaultOrderBy, defaultOrderByAsc: defaultOrderByAsc, height: height -
-                    headerHeight -
-                    (hideFooter ? 0 : bottomHeight + 1) -
-                    scrollbarSize, headerRenderer: headerRenderer, idField: idField, itemRenderer: itemRenderer, footerRenderer: hideFooter ? undefined : footerRenderer, width: Math.max(gridWidth, widthCalculator.total), mRef: refs, ...rest }));
-        }
-    }, [gridWidth]);
-    // Watch container
-    const { dimensions } = useDimensions(1, undefined, 50);
-    const gridRect = dimensions[0][2];
-    const windowSize = useWindowSize(50);
-    React.useEffect(() => {
-        if (gridRect == null || width != null)
-            return;
-        // Reset column widths
-        if (state.ref)
-            state.ref.resetAfterColumnIndex(0);
-        const body = window.document.body;
-        const scrollWidth = body.scrollWidth - body.clientWidth;
-        stateUpdate({
-            gridWidth: gridRect.width - scrollWidth
-        });
-    }, [gridRect, windowSize]);
-    return (React.createElement(Paper, { ref: dimensions[0][0], sx: {
+        const defaultOrderByAsc = defaultOrderBy
+            ? (_a = columns.find((column) => column.field === defaultOrderBy)) === null || _a === void 0 ? void 0 : _a.sortAsc
+            : undefined;
+        return (React.createElement(ScrollerGrid, { className: Utils.mergeClasses('DataGridEx-Body', 'DataGridEx-CustomBar', className, createGridStyle(alternatingColors, selectedColor, hoverColor)), columnCount: columns.length, columnWidth: columnWidth, defaultOrderBy: defaultOrderBy, defaultOrderByAsc: defaultOrderByAsc, height: height -
+                headerHeight -
+                (hideFooter ? 0 : bottomHeight + 1) -
+                scrollbarSize, headerRenderer: headerRenderer, idField: idField, itemRenderer: itemRenderer, footerRenderer: hideFooter ? undefined : footerRenderer, width: Math.max(width !== null && width !== void 0 ? width : 0, widthCalculator.total), mRef: mRefLocal, ...rest }));
+    }, [width]);
+    return (React.createElement(Paper, { sx: {
             fontSize: '0.875rem',
             height,
             '& .DataGridEx-Cell': {
@@ -350,7 +324,7 @@ export function DataGridEx(props) {
             }
         } },
         React.createElement("div", { className: "DataGridEx-CustomBar", style: {
-                width: gridWidth,
+                width,
                 overflowX: 'auto',
                 overflowY: 'hidden'
             } }, table)));

package/lib/mu/DataGridRenderers.d.ts

@@ -13,8 +13,10 @@ export declare namespace DataGridRenderers {
     function defaultCellRenderer<T extends Record<string, any>>({ cellProps, data, field, formattedValue, columnIndex, type, renderProps }: GridCellRendererProps<T>): React.ReactNode;
     /**
      * Default footer item renderer
-     * @param param Props
+     * @param rows Rows
+     * @param props Renderer props
+     * @param location Renderer location (column index)
      * @returns Component
      */
-    function defaultFooterItemRenderer<T>({ index, states, checkable }: DataGridExFooterItemRendererProps<T>): string | undefined;
+    function defaultFooterItemRenderer<T>(_rows: T[], { index, states, checkable }: DataGridExFooterItemRendererProps<T>, location?: number): string | undefined;
 }

package/lib/mu/DataGridRenderers.js

@@ -75,19 +75,21 @@ export var DataGridRenderers;
     DataGridRenderers.defaultCellRenderer = defaultCellRenderer;
     /**
      * Default footer item renderer
-     * @param param Props
+     * @param rows Rows
+     * @param props Renderer props
+     * @param location Renderer location (column index)
      * @returns Component
      */
-    function defaultFooterItemRenderer({ index, states, checkable }) {
-        const { selectedItems, rows, hasNextPage } = states;
-        if (checkable && index === 1) {
+    function defaultFooterItemRenderer(_rows, { index, states, checkable }, location = 1) {
+        const { selectedItems, loadedItems, hasNextPage } = states;
+        if (checkable && index === location + 1) {
             return [
                 selectedItems.length,
-                rows.length.toLocaleString() + (hasNextPage ? '+' : '')
+                loadedItems.toLocaleString() + (hasNextPage ? '+' : '')
             ].join(' / ');
         }
-        if (!checkable && index === 0) {
-            return rows.length.toLocaleString() + (hasNextPage ? '+' : '');
+        if (!checkable && index === location) {
+            return loadedItems.toLocaleString() + (hasNextPage ? '+' : '');
         }
         return undefined;
     }

package/lib/mu/GridMethodRef.d.ts

@@ -1,3 +1,4 @@
+import { GridLoaderStates } from '../components/GridLoader';
 /**
  * Grid method ref
  */
@@ -6,5 +7,5 @@ export interface GridMethodRef {
      * Reset
      * @param add Additional data
      */
-    reset(add?: {}): void;
+    reset(add?: Partial<GridLoaderStates<unknown>>): void;
 }

package/lib/mu/ResponsibleContainer.d.ts

@@ -7,6 +7,9 @@ import { GridJsonData } from '../components/GridLoader';
 import { DataGridExProps } from './DataGridEx';
 import { GridMethodRef } from './GridMethodRef';
 import { ScrollerListExInnerItemRendererProps } from './ScrollerListEx';
+/**
+ * ResponsibleContainer props
+ */
 export interface ResponsibleContainerProps<T extends {}, F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate> extends Omit<DataGridExProps<T>, 'height' | 'itemKey' | 'loadData' | 'mRef' | 'onScroll' | 'onItemsRendered'> {
     /**
      * Height will be deducted
@@ -57,6 +60,14 @@ export interface ResponsibleContainerProps<T extends {}, F extends DataTypes.Bas
      * Methods
      */
     mRef?: React.MutableRefObject<GridMethodRef | undefined>;
+    /**
+     * Paddings
+     */
+    paddings?: {};
+    /**
+     * Pull to refresh data
+     */
+    pullToRefresh?: boolean;
     /**
      * Searchbox SX
      */
@@ -66,4 +77,9 @@ export interface ResponsibleContainerProps<T extends {}, F extends DataTypes.Bas
      */
     sizeReadyMiliseconds?: number;
 }
+/**
+ * Responsible container
+ * @param props Props
+ * @returns Layout
+ */
 export declare function ResponsibleContainer<T extends {}, F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate>(props: ResponsibleContainerProps<T, F>): JSX.Element;