@itwin/itwinui-react 3.0.0-dev.0 → 3.0.0-dev.10

package/esm/core/Table/filters/TextFilter/TextFilter.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
-import '@itwin/itwinui-css/css/table.css';
+import * as React from 'react';
 import type { FilterButtonBarTranslation } from '../FilterButtonBar.js';
 import type { TableFilterProps } from '../types.js';
-export declare type TextFilterProps<T extends Record<string, unknown>> = TableFilterProps<T> & {
+export type TextFilterProps<T extends Record<string, unknown>> = TableFilterProps<T> & {
     translatedLabels?: FilterButtonBarTranslation;
 };
-export declare const TextFilter: <T extends Record<string, unknown>>(props: TextFilterProps<T>) => JSX.Element;
+export declare const TextFilter: <T extends Record<string, unknown>>(props: TextFilterProps<T>) => React.JSX.Element;

package/esm/core/Table/filters/TextFilter/TextFilter.js

@@ -3,25 +3,41 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import '@itwin/itwinui-css/css/table.css';
 import { useGlobals } from '../../../utils/index.js';
 import { Input } from '../../../Input/index.js';
 import { FilterButtonBar } from '../FilterButtonBar.js';
 import { BaseFilter } from '../BaseFilter.js';
 export const TextFilter = (props) => {
-    var _a;
-    const { column, translatedLabels, setFilter, clearFilter } = props;
-    useGlobals();
-    const [text, setText] = React.useState((_a = column.filterValue) !== null && _a !== void 0 ? _a : '');
-    const onKeyDown = (event) => {
-        if (event.altKey) {
-            return;
-        }
-        if (event.key === 'Enter') {
-            setFilter(text);
-        }
-    };
-    return (React.createElement(BaseFilter, null,
-        React.createElement(Input, { value: text, onChange: (e) => setText(e.target.value), onKeyDown: onKeyDown, setFocus: true }),
-        React.createElement(FilterButtonBar, { setFilter: () => setFilter(text), clearFilter: clearFilter, translatedLabels: translatedLabels })));
+  const { column, translatedLabels, setFilter, clearFilter } = props;
+  useGlobals();
+  const [text, setText] = React.useState(column.filterValue ?? '');
+  const inputRef = React.useRef(null);
+  React.useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, []);
+  const onKeyDown = (event) => {
+    if (event.altKey) {
+      return;
+    }
+    if (event.key === 'Enter') {
+      setFilter(text);
+    }
+  };
+  return React.createElement(
+    BaseFilter,
+    null,
+    React.createElement(Input, {
+      ref: inputRef,
+      value: text,
+      onChange: (e) => setText(e.target.value),
+      onKeyDown: onKeyDown,
+    }),
+    React.createElement(FilterButtonBar, {
+      setFilter: () => setFilter(text),
+      clearFilter: clearFilter,
+      translatedLabels: translatedLabels,
+    }),
+  );
 };

package/esm/core/Table/filters/customFilterFunctions.js

@@ -7,24 +7,26 @@ const isValidDate = (date) => !!date && !isNaN(date.valueOf());
  * @returns Filtered rows
  */
 const betweenDate = (rows, ids, filterValue) => {
-    const [min, max] = filterValue || [];
-    const MAX_DATE_VALUE = 8640000000000000;
-    const minValue = (isValidDate(min) ? min : new Date(-MAX_DATE_VALUE));
-    const maxValue = (isValidDate(max) ? max : new Date(MAX_DATE_VALUE));
-    return rows.filter((row) => {
-        return ids.some((id) => {
-            const rowValue = row.values[id];
-            return (rowValue.valueOf() >= minValue.valueOf() &&
-                rowValue.valueOf() <= maxValue.valueOf());
-        });
+  const [min, max] = filterValue || [];
+  const MAX_DATE_VALUE = 8640000000000000;
+  const minValue = isValidDate(min) ? min : new Date(-MAX_DATE_VALUE);
+  const maxValue = isValidDate(max) ? max : new Date(MAX_DATE_VALUE);
+  return rows.filter((row) => {
+    return ids.some((id) => {
+      const rowValue = row.values[id];
+      return (
+        rowValue.valueOf() >= minValue.valueOf() &&
+        rowValue.valueOf() <= maxValue.valueOf()
+      );
     });
+  });
 };
 /**
  * Filter is not being set if filter value is invalid.
  */
 betweenDate.autoRemove = (val) => {
-    return !val || (!isValidDate(val[0]) && !isValidDate(val[1]));
+  return !val || (!isValidDate(val[0]) && !isValidDate(val[1]));
 };
 export const customFilterFunctions = {
-    betweenDate,
+  betweenDate,
 };

package/esm/core/Table/filters/defaultFilterFunctions.js

@@ -1,120 +1,125 @@
 const text = (rows, ids, filterValue) => {
-    rows = rows.filter((row) => {
-        return ids.some((id) => {
-            const rowValue = row.values[id];
-            return String(rowValue)
-                .toLowerCase()
-                .includes(String(filterValue).toLowerCase());
-        });
+  rows = rows.filter((row) => {
+    return ids.some((id) => {
+      const rowValue = row.values[id];
+      return String(rowValue)
+        .toLowerCase()
+        .includes(String(filterValue).toLowerCase());
     });
-    return rows;
+  });
+  return rows;
 };
 text.autoRemove = (val) => !val;
 const exactText = (rows, ids, filterValue) => {
-    return rows.filter((row) => {
-        return ids.some((id) => {
-            const rowValue = row.values[id];
-            return rowValue !== undefined
-                ? String(rowValue).toLowerCase() === String(filterValue).toLowerCase()
-                : true;
-        });
+  return rows.filter((row) => {
+    return ids.some((id) => {
+      const rowValue = row.values[id];
+      return rowValue !== undefined
+        ? String(rowValue).toLowerCase() === String(filterValue).toLowerCase()
+        : true;
     });
+  });
 };
 exactText.autoRemove = (val) => !val;
 const exactTextCase = (rows, ids, filterValue) => {
-    return rows.filter((row) => {
-        return ids.some((id) => {
-            const rowValue = row.values[id];
-            return rowValue !== undefined
-                ? String(rowValue) === String(filterValue)
-                : true;
-        });
+  return rows.filter((row) => {
+    return ids.some((id) => {
+      const rowValue = row.values[id];
+      return rowValue !== undefined
+        ? String(rowValue) === String(filterValue)
+        : true;
     });
+  });
 };
 exactTextCase.autoRemove = (val) => !val;
 const includes = (rows, ids, filterValue) => {
-    return rows.filter((row) => {
-        return ids.some((id) => {
-            const rowValue = row.values[id];
-            return rowValue.includes(filterValue);
-        });
+  return rows.filter((row) => {
+    return ids.some((id) => {
+      const rowValue = row.values[id];
+      return rowValue.includes(filterValue);
     });
+  });
 };
 includes.autoRemove = (val) => !val || !val.length;
 const includesAll = (rows, ids, filterValue) => {
-    return rows.filter((row) => {
-        return ids.some((id) => {
-            const rowValue = row.values[id];
-            return (rowValue &&
-                rowValue.length &&
-                filterValue.every((val) => rowValue.includes(val)));
-        });
+  return rows.filter((row) => {
+    return ids.some((id) => {
+      const rowValue = row.values[id];
+      return (
+        rowValue &&
+        rowValue.length &&
+        filterValue.every((val) => rowValue.includes(val))
+      );
     });
+  });
 };
 includesAll.autoRemove = (val) => !val || !val.length;
 const includesSome = (rows, ids, filterValue) => {
-    return rows.filter((row) => {
-        return ids.some((id) => {
-            const rowValue = row.values[id];
-            return (rowValue &&
-                rowValue.length &&
-                filterValue.some((val) => rowValue.includes(val)));
-        });
+  return rows.filter((row) => {
+    return ids.some((id) => {
+      const rowValue = row.values[id];
+      return (
+        rowValue &&
+        rowValue.length &&
+        filterValue.some((val) => rowValue.includes(val))
+      );
     });
+  });
 };
 includesSome.autoRemove = (val) => !val || !val.length;
 const includesValue = (rows, ids, filterValue) => {
-    return rows.filter((row) => {
-        return ids.some((id) => {
-            const rowValue = row.values[id];
-            return filterValue.includes(rowValue);
-        });
+  return rows.filter((row) => {
+    return ids.some((id) => {
+      const rowValue = row.values[id];
+      return filterValue.includes(rowValue);
     });
+  });
 };
 includesValue.autoRemove = (val) => !val || !val.length;
 const exact = (rows, ids, filterValue) => {
-    return rows.filter((row) => {
-        return ids.some((id) => {
-            const rowValue = row.values[id];
-            return rowValue === filterValue;
-        });
+  return rows.filter((row) => {
+    return ids.some((id) => {
+      const rowValue = row.values[id];
+      return rowValue === filterValue;
     });
+  });
 };
 exact.autoRemove = (val) => typeof val === 'undefined';
 const equals = (rows, ids, filterValue) => {
-    return rows.filter((row) => {
-        return ids.some((id) => {
-            const rowValue = row.values[id];
-            // eslint-disable-next-line eqeqeq
-            return rowValue == filterValue;
-        });
+  return rows.filter((row) => {
+    return ids.some((id) => {
+      const rowValue = row.values[id];
+      // eslint-disable-next-line eqeqeq
+      return rowValue == filterValue;
     });
+  });
 };
 equals.autoRemove = (val) => val == null;
 const between = (rows, ids, filterValue) => {
-    let [min, max] = filterValue || [];
-    min = typeof min === 'number' ? min : -Infinity;
-    max = typeof max === 'number' ? max : Infinity;
-    if (min > max) {
-        const temp = min;
-        min = max;
-        max = temp;
-    }
-    return rows.filter((row) => {
-        return ids.some((id) => {
-            const rowValue = row.values[id];
-            return rowValue >= min && rowValue <= max;
-        });
+  let [min, max] = filterValue || [];
+  min = typeof min === 'number' ? min : -Infinity;
+  max = typeof max === 'number' ? max : Infinity;
+  if (min > max) {
+    const temp = min;
+    min = max;
+    max = temp;
+  }
+  return rows.filter((row) => {
+    return ids.some((id) => {
+      const rowValue = row.values[id];
+      return rowValue >= min && rowValue <= max;
     });
+  });
 };
-between.autoRemove = (val) => !val || (typeof val[0] !== 'number' && typeof val[1] !== 'number');
+between.autoRemove = (val) =>
+  !val || (typeof val[0] !== 'number' && typeof val[1] !== 'number');
 export const defaultFilterFunctions = {
-    text,
-    exactText,
-    exactTextCase,
-    includes,
-    includesAll,
-    includesSome,
-    includesValue,
-    between,
+  text,
+  exactText,
+  exactTextCase,
+  includes,
+  includesAll,
+  includesSome,
+  includesValue,
+  between,
 };

package/esm/core/Table/filters/tableFilters.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
+import * as React from 'react';
 import type { DateRangeTranslation } from './DateRangeFilter/DateRangeFilter.js';
 import type { FilterButtonBarTranslation } from './FilterButtonBar.js';
 import type { NumberRangeTranslation, NumberRangeFilterProps } from './NumberRangeFilter/NumberRangeFilter.js';
 import type { TableFilterProps } from './types.js';
-export declare type DateRangeFilterOptions = {
+export type DateRangeFilterOptions = {
     /**
      * Function that formats selected date into a `string` that is shown inside the input.
      */
@@ -28,7 +28,7 @@ export declare const tableFilters: {
      * Basic filter with a single input field.
      * @param translatedLabels Translated filter labels.
      */
-    TextFilter: (translatedLabels?: FilterButtonBarTranslation) => <T extends Record<string, unknown>>(props: TableFilterProps<T>) => JSX.Element;
+    TextFilter: (translatedLabels?: FilterButtonBarTranslation) => <T extends Record<string, unknown>>(props: TableFilterProps<T>) => React.JSX.Element;
     /**
      * Date range filter.
      *
@@ -39,7 +39,7 @@ export declare const tableFilters: {
      * If your data is different type e.g. `string`, you can use `accessor` property in column description:
      * `accessor: (rowData) => new Date(rowData.date)`.
      */
-    DateRangeFilter: (options?: DateRangeFilterOptions) => <T_1 extends Record<string, unknown>>(props: TableFilterProps<T_1>) => JSX.Element;
+    DateRangeFilter: (options?: DateRangeFilterOptions) => <T_1 extends Record<string, unknown>>(props: TableFilterProps<T_1>) => React.JSX.Element;
     /**
      * Number range filter.
      *
@@ -48,5 +48,5 @@ export declare const tableFilters: {
      * `accessor: (rowData) => Number(rowData.numberProp)`.
      * @param translatedLabels Translated filter labels.
      */
-    NumberRangeFilter: (translatedLabels?: NumberRangeTranslation & FilterButtonBarTranslation) => <T_2 extends Record<string, unknown>>(props: NumberRangeFilterProps<T_2>) => JSX.Element;
+    NumberRangeFilter: (translatedLabels?: NumberRangeTranslation & FilterButtonBarTranslation) => <T_2 extends Record<string, unknown>>(props: NumberRangeFilterProps<T_2>) => React.JSX.Element;
 };

package/esm/core/Table/filters/tableFilters.js

@@ -7,29 +7,38 @@ import { DateRangeFilter } from './DateRangeFilter/DateRangeFilter.js';
 import { NumberRangeFilter } from './NumberRangeFilter/NumberRangeFilter.js';
 import { TextFilter } from './TextFilter/TextFilter.js';
 export const tableFilters = {
-    /**
-     * Basic filter with a single input field.
-     * @param translatedLabels Translated filter labels.
-     */
-    TextFilter: (translatedLabels) => (props) => React.createElement(TextFilter, { ...props, translatedLabels: translatedLabels }),
-    /**
-     * Date range filter.
-     *
-     * By default it handles user input in `en-us` date format. If you want to use other format
-     * please provide `formatDate`, `parseInput` and `placeholder`.
-     *
-     * It only works with `Date` type object properties.
-     * If your data is different type e.g. `string`, you can use `accessor` property in column description:
-     * `accessor: (rowData) => new Date(rowData.date)`.
-     */
-    DateRangeFilter: (options) => (props) => React.createElement(DateRangeFilter, { ...props, ...options }),
-    /**
-     * Number range filter.
-     *
-     * It only works with `number` type object properties.
-     * If your data is different type e.g. `string`, you can use `accessor` property in column description:
-     * `accessor: (rowData) => Number(rowData.numberProp)`.
-     * @param translatedLabels Translated filter labels.
-     */
-    NumberRangeFilter: (translatedLabels) => (props) => React.createElement(NumberRangeFilter, { ...props, translatedLabels: translatedLabels }),
+  /**
+   * Basic filter with a single input field.
+   * @param translatedLabels Translated filter labels.
+   */
+  TextFilter: (translatedLabels) => (props) =>
+    React.createElement(TextFilter, {
+      ...props,
+      translatedLabels: translatedLabels,
+    }),
+  /**
+   * Date range filter.
+   *
+   * By default it handles user input in `en-us` date format. If you want to use other format
+   * please provide `formatDate`, `parseInput` and `placeholder`.
+   *
+   * It only works with `Date` type object properties.
+   * If your data is different type e.g. `string`, you can use `accessor` property in column description:
+   * `accessor: (rowData) => new Date(rowData.date)`.
+   */
+  DateRangeFilter: (options) => (props) =>
+    React.createElement(DateRangeFilter, { ...props, ...options }),
+  /**
+   * Number range filter.
+   *
+   * It only works with `number` type object properties.
+   * If your data is different type e.g. `string`, you can use `accessor` property in column description:
+   * `accessor: (rowData) => Number(rowData.numberProp)`.
+   * @param translatedLabels Translated filter labels.
+   */
+  NumberRangeFilter: (translatedLabels) => (props) =>
+    React.createElement(NumberRangeFilter, {
+      ...props,
+      translatedLabels: translatedLabels,
+    }),
 };

package/esm/core/Table/filters/types.d.ts

@@ -1,4 +1,4 @@
-import type { FieldType, FilterProps, FilterType, HeaderGroup } from 'react-table';
+import type { FieldType, FilterType, TableFilterProps } from 'react-table';
 export interface TableFilterValue<T extends Record<string, unknown>> {
     /**
      * Id of the column.
@@ -17,21 +17,4 @@ export interface TableFilterValue<T extends Record<string, unknown>> {
      */
     filterType: FilterType<T>;
 }
-export declare type TableFilterProps<T extends Record<string, unknown> | object> = FilterProps<T> & {
-    /**
-     * Data of column on which filter is opened. It is provided by the table it self.
-     */
-    column: HeaderGroup<T>;
-    /**
-     * Function to close the filter. It is provided by the table it self.
-     */
-    close: () => void;
-    /**
-     * Function to set the filter value. It is provided by the table it self.
-     */
-    setFilter: (filterValue: unknown | undefined) => void;
-    /**
-     * Function to clear the filter value. It is provided by the table it self.
-     */
-    clearFilter: () => void;
-};
+export type { TableFilterProps };

package/esm/core/Table/hooks/useColumnDragAndDrop.js

@@ -1,106 +1,114 @@
 import { actions, makePropGetter, useGetLatest } from 'react-table';
+import styles from '../../../styles.js';
 const REORDER_ACTIONS = {
-    columnDragStart: 'columnDragStart',
-    columnDragEnd: 'columnDragEnd',
+  columnDragStart: 'columnDragStart',
+  columnDragEnd: 'columnDragEnd',
 };
 export const useColumnDragAndDrop = (isEnabled) => (hooks) => {
-    hooks.getDragAndDropProps = [defaultGetDragAndDropProps(isEnabled)];
-    hooks.stateReducers.push(reducer);
-    hooks.useInstance.push(useInstance);
+  hooks.getDragAndDropProps = [defaultGetDragAndDropProps(isEnabled)];
+  hooks.stateReducers.push(reducer);
+  hooks.useInstance.push(useInstance);
 };
-const defaultGetDragAndDropProps = (isEnabled) => (props, { instance, header, }) => {
+const defaultGetDragAndDropProps =
+  (isEnabled) =>
+  (props, { instance, header }) => {
     if (!isEnabled || header.disableReordering) {
-        return props;
+      return props;
     }
     const onDragStart = () => {
-        instance.dispatch({
-            type: REORDER_ACTIONS.columnDragStart,
-            columnIndex: instance.flatHeaders.indexOf(header),
-        });
+      instance.dispatch({
+        type: REORDER_ACTIONS.columnDragStart,
+        columnIndex: instance.flatHeaders.indexOf(header),
+      });
     };
     const setOnDragColumnStyle = (event, position) => {
-        const columnElement = event.currentTarget;
-        columnElement.classList.remove('iui-table-reorder-column-right');
-        columnElement.classList.remove('iui-table-reorder-column-left');
-        if (position === 'left') {
-            columnElement.classList.add('iui-table-reorder-column-left');
-        }
-        else if (position === 'right') {
-            columnElement.classList.add('iui-table-reorder-column-right');
-        }
+      const columnElement = event.currentTarget;
+      columnElement.classList.remove(styles['iui-table-reorder-column-right']);
+      columnElement.classList.remove(styles['iui-table-reorder-column-left']);
+      if (position === 'left') {
+        columnElement.classList.add(styles['iui-table-reorder-column-left']);
+      } else if (position === 'right') {
+        columnElement.classList.add(styles['iui-table-reorder-column-right']);
+      }
     };
     const reorderColumns = (tableColumns, srcIndex, dstIndex) => {
-        const newTableColumns = [...tableColumns];
-        const [removed] = newTableColumns.splice(srcIndex, 1);
-        newTableColumns.splice(dstIndex, 0, removed);
-        return newTableColumns;
+      const newTableColumns = [...tableColumns];
+      const [removed] = newTableColumns.splice(srcIndex, 1);
+      newTableColumns.splice(dstIndex, 0, removed);
+      return newTableColumns;
     };
     const onDragOver = (event) => {
-        event.preventDefault();
-        const headerIndex = instance.flatHeaders.indexOf(header);
-        if (instance.state.columnReorderStartIndex !== headerIndex) {
-            setOnDragColumnStyle(event, instance.state.columnReorderStartIndex > headerIndex
-                ? 'left'
-                : 'right');
-        }
+      event.preventDefault();
+      const headerIndex = instance.flatHeaders.indexOf(header);
+      if (instance.state.columnReorderStartIndex !== headerIndex) {
+        setOnDragColumnStyle(
+          event,
+          instance.state.columnReorderStartIndex > headerIndex
+            ? 'left'
+            : 'right',
+        );
+      }
     };
     const onDragLeave = (event) => {
-        setOnDragColumnStyle(event);
+      setOnDragColumnStyle(event);
     };
     const onDrop = (event) => {
-        event.preventDefault();
-        setOnDragColumnStyle(event);
-        const columnIds = instance.allColumns.map((x) => x.id);
-        const srcIndex = instance.state.columnReorderStartIndex;
-        const dstIndex = columnIds.findIndex((x) => x === header.id);
-        if (srcIndex === dstIndex || srcIndex === -1 || dstIndex === -1) {
-            return;
-        }
-        instance.setColumnOrder(reorderColumns(columnIds, srcIndex, dstIndex));
-        instance.dispatch({
-            type: REORDER_ACTIONS.columnDragEnd,
-            columnIndex: -1,
-        });
+      event.preventDefault();
+      setOnDragColumnStyle(event);
+      const columnIds = instance.allColumns.map((x) => x.id);
+      const srcIndex = instance.state.columnReorderStartIndex;
+      const dstIndex = columnIds.findIndex((x) => x === header.id);
+      if (srcIndex === dstIndex || srcIndex === -1 || dstIndex === -1) {
+        return;
+      }
+      instance.setColumnOrder(reorderColumns(columnIds, srcIndex, dstIndex));
+      instance.dispatch({
+        type: REORDER_ACTIONS.columnDragEnd,
+        columnIndex: -1,
+      });
     };
     return [
-        props,
-        {
-            draggable: true,
-            onDragStart,
-            onDragOver,
-            onDragLeave,
-            onDrop,
-        },
+      props,
+      {
+        draggable: true,
+        onDragStart,
+        onDragOver,
+        onDragLeave,
+        onDrop,
+      },
     ];
-};
+  };
 const reducer = (newState, action) => {
-    switch (action.type) {
-        case actions.init:
-            return {
-                ...newState,
-                columnReorderStartIndex: -1,
-            };
-        case REORDER_ACTIONS.columnDragStart:
-            return {
-                ...newState,
-                columnReorderStartIndex: action.columnIndex,
-            };
-        case REORDER_ACTIONS.columnDragEnd:
-            return {
-                ...newState,
-                columnReorderStartIndex: -1,
-            };
-        default:
-            return newState;
-    }
+  switch (action.type) {
+    case actions.init:
+      return {
+        ...newState,
+        columnReorderStartIndex: -1,
+      };
+    case REORDER_ACTIONS.columnDragStart:
+      return {
+        ...newState,
+        columnReorderStartIndex: action.columnIndex,
+      };
+    case REORDER_ACTIONS.columnDragEnd:
+      return {
+        ...newState,
+        columnReorderStartIndex: -1,
+      };
+    default:
+      return newState;
+  }
 };
 const useInstance = (instance) => {
-    const { flatHeaders, getHooks } = instance;
-    const getInstance = useGetLatest(instance);
-    flatHeaders.forEach((header) => {
-        header.getDragAndDropProps = makePropGetter(getHooks().getDragAndDropProps, {
-            instance: getInstance(),
-            header,
-        });
-    });
+  const { flatHeaders, getHooks } = instance;
+  const getInstance = useGetLatest(instance);
+  flatHeaders.forEach((header) => {
+    header.getDragAndDropProps = makePropGetter(
+      getHooks().getDragAndDropProps,
+      {
+        instance: getInstance(),
+        header,
+      },
+    );
+  });
 };

package/esm/core/Table/hooks/useExpanderCell.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
 import type { CellProps, Hooks, Row } from 'react-table';
-export declare const useExpanderCell: <T extends Record<string, unknown>>(subComponent?: ((row: Row<T>) => React.ReactNode) | undefined, expanderCell?: ((cellProps: CellProps<T, any>) => React.ReactNode) | undefined, isRowDisabled?: ((rowData: T) => boolean) | undefined) => (hooks: Hooks<T>) => void;
+export declare const useExpanderCell: <T extends Record<string, unknown>>(subComponent?: ((row: Row<T>) => React.ReactNode) | undefined, expanderCell?: ((cellProps: CellProps<T>) => React.ReactNode) | undefined, isRowDisabled?: ((rowData: T) => boolean) | undefined) => (hooks: Hooks<T>) => void;