es-grid-template 1.8.70 → 1.8.72

package/es/group-component/header/renderFilter.js

@@ -0,0 +1,291 @@
+// import type { IFormat } from "../../tanstack-table/type";
+
+// import type { AnyObject } from './type';
+
+import React, { Fragment } from "react";
+import moment from "moment/moment";
+import { CustomProvider, DatePicker, DateRangePicker, Empty, Input, Select } from "rc-master-ui";
+import dayjs from "dayjs";
+import { convertDateToDayjs, convertDayjsToDate, convertFormat, getDatepickerFormat, getDateRangeFormat, getTypeFilter, isEmpty } from "../hook/utils";
+import NumberInput from "../components/number";
+import NumberRange from "../components/number-range";
+import CheckboxFilter from "../components/checkbox-filter/CheckboxFilter";
+export const renderFilter = args => {
+  const {
+    column,
+    selectedKeys,
+    setSelectedKeys,
+    // confirm,
+    t,
+    locale,
+    buddhistLocale,
+    dateRangeLocale,
+    dataSourceFilter,
+    format,
+    doFilter
+  } = args;
+  const {
+    format: columnFormat,
+    typeFilter,
+    type: columnType,
+    field,
+    source
+  } = column?.meta ?? {};
+  const cellFormat = columnFormat ? typeof columnFormat === 'function' ? columnFormat({}) : columnFormat : format;
+  const type = getTypeFilter(column.meta ?? {});
+  const dateFormat = getDatepickerFormat(typeFilter ?? columnType, cellFormat) ?? 'DD/MM/YYYY';
+  const dateRangeFormat = convertFormat(getDateRangeFormat(columnType, cellFormat) ?? 'dd/MM/yyyy');
+  const find = dataSourceFilter?.find(it => it.key === field);
+  const options = find ? find.data : [];
+  switch (type) {
+    case 'Number':
+      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+        className: 'mb-1'
+      }, /*#__PURE__*/React.createElement(NumberInput, {
+        t: t,
+        value: selectedKeys[0],
+        onChange: vals => {
+          setSelectedKeys(vals);
+        },
+        onPressEnter: () => doFilter?.(true)
+      }))));
+    case 'NumberRange':
+      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(NumberRange, {
+        t: t,
+        min: selectedKeys[0],
+        max: selectedKeys[1],
+        onChange: vals => {
+          setSelectedKeys(vals);
+        },
+        onPressEnter: () => doFilter?.(true)
+      })));
+    case 'Date':
+      const dateValue = selectedKeys[0] ? convertDateToDayjs(new Date(selectedKeys[0]), dateFormat) : null;
+      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+        className: 'mb-1'
+      }, /*#__PURE__*/React.createElement(DatePicker, {
+        format: {
+          format: dateFormat,
+          type: 'mask'
+        },
+        locale: buddhistLocale,
+        style: {
+          width: '100%',
+          height: '100%'
+        },
+        value: dateValue,
+        defaultValue: dateValue
+        // placeholder={t ? t(column?.placeholder) : column?.placeholder}
+        ,
+        onChange: (date, dateString) => {
+          const newDateValue = dateString ? moment(convertDayjsToDate(dateString, dateFormat)).format() : null;
+          setSelectedKeys(newDateValue ? [newDateValue] : []);
+        }
+      }))));
+    case 'DateRange':
+      // const dateRangeValue: any = [selectedKeys[0] ? convertDateToDayjs(new Date(selectedKeys[0]), dateRangeFormat) : '', selectedKeys[1] ? convertDateToDayjs(new Date(selectedKeys[1]), dateRangeFormat) : '']
+      const dateRangeValue = selectedKeys && selectedKeys.length > 0 ? [selectedKeys[0] ? new Date(selectedKeys[0]) : '', selectedKeys[1] ? new Date(selectedKeys[1]) : ''] : null;
+      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+        className: 'mb-1'
+      }, /*#__PURE__*/React.createElement(CustomProvider, {
+        locale: dateRangeLocale
+      }, /*#__PURE__*/React.createElement(DateRangePicker
+      // placeholder={['Ngày bắt đầu', 'Ngày bắt đầu']}
+      , {
+        style: {
+          width: 300
+        },
+        format: dateRangeFormat,
+        value: dateRangeValue,
+        onChange: value => {
+          const newDateRangeValue = value ? [value[0] ? moment(value[0]).format() : '', value[1] ? moment(value[1]).format() : ''] : [];
+          setSelectedKeys(newDateRangeValue);
+        },
+        menuClassName: "rc-menu-popup"
+      })))));
+    case 'Week':
+      const weekValue = !isEmpty(selectedKeys[0]) ? dayjs(selectedKeys[0], dateFormat) : null;
+      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+        className: 'mb-1'
+      }, /*#__PURE__*/React.createElement(DatePicker, {
+        format: {
+          format: dateFormat,
+          type: 'mask'
+        },
+        picker: 'week',
+        locale: buddhistLocale,
+        style: {
+          width: '100%',
+          height: '100%'
+        },
+        value: weekValue,
+        defaultValue: weekValue
+        // placeholder={column?.placeholder}
+        ,
+        onChange: (date, dateString) => {
+          const newDateValue = dateString ?? null;
+          setSelectedKeys(newDateValue ? [newDateValue] : []);
+        }
+      }))));
+    case 'Month':
+      const monthValue = !isEmpty(selectedKeys[0]) ? dayjs(selectedKeys[0], dateFormat) : null;
+      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+        className: 'mb-1'
+      }, /*#__PURE__*/React.createElement(DatePicker, {
+        format: {
+          format: dateFormat,
+          type: 'mask'
+        },
+        picker: 'month',
+        locale: buddhistLocale,
+        style: {
+          width: '100%',
+          height: '100%'
+        },
+        value: monthValue,
+        defaultValue: monthValue
+        // placeholder={column?.placeholder}
+        ,
+        onChange: (date, dateString) => {
+          const newDateValue = dateString ?? null;
+          setSelectedKeys(newDateValue ? [newDateValue] : []);
+        }
+      })));
+
+    //   // case 'Quarter':
+    //   //
+    //   //   // const monthValue = selectedKeys[0] ? convertDateToDayjs(new Date(selectedKeys[0]), dateFormat) : null
+    //   //
+    //   //   const pickerFormat  = getDatepickerFormat(getEditType(col) as IEditType, col)
+    //   //   const pickerValue = !isEmpty(selectedKeys[0]) ? dayjs(selectedKeys[0], pickerFormat) : null
+    //   //
+    //   //   return (
+    //   //     <Fragment>
+    //   //       <div>
+    //   //
+    //   //
+    //   //         <div className={'mb-1'}>
+    //   //
+    //   //           <DatePicker
+    //   //             format={{
+    //   //               format: dateFormat,
+    //   //               type: 'mask'
+    //   //             }}
+    //   //             locale={buddhistLocale}
+    //   //             style={{width: '100%', height: '100%'}}
+    //   //             value={pickerValue}
+    //   //             defaultValue={pickerValue}
+    //   //             placeholder={column.placeholder}
+    //   //             onChange={(date, dateString) => {
+    //   //               const newDateValue = dateString ? moment(convertDayjsToDate(dateString as string, dateFormat)).format() : null
+    //   //               setSelectedKeys(newDateValue ? [newDateValue] : [])
+    //   //
+    //   //             }}
+    //   //
+    //   //           />
+    //   //         </div>
+    //   //
+    //   //
+    //   //       </div>
+    //   //     </Fragment>
+    //   //   )
+    //   //
+    //   // case 'Year':
+    //   //
+    //   //   // const monthValue = selectedKeys[0] ? convertDateToDayjs(new Date(selectedKeys[0]), dateFormat) : null
+    //   //
+    //   //   const pickerFormat  = getDatepickerFormat(getEditType(col) as IEditType, col)
+    //   //   const pickerValue = !isEmpty(selectedKeys[0]) ? dayjs(selectedKeys[0], pickerFormat) : null
+    //   //
+    //   //   return (
+    //   //     <Fragment>
+    //   //       <div>
+    //   //
+    //   //
+    //   //         <div className={'mb-1'}>
+    //   //
+    //   //           <DatePicker
+    //   //             format={{
+    //   //               format: dateFormat,
+    //   //               type: 'mask'
+    //   //             }}
+    //   //             locale={buddhistLocale}
+    //   //             style={{width: '100%', height: '100%'}}
+    //   //             value={pickerValue}
+    //   //             defaultValue={pickerValue}
+    //   //             placeholder={column.placeholder}
+    //   //             onChange={(date, dateString) => {
+    //   //               const newDateValue = dateString ? moment(convertDayjsToDate(dateString as string, dateFormat)).format() : null
+    //   //               setSelectedKeys(newDateValue ? [newDateValue] : [])
+    //   //
+    //   //             }}
+    //   //
+    //   //           />
+    //   //         </div>
+    //   //
+    //   //
+    //   //       </div>
+    //   //     </Fragment>
+    //   //   )
+
+    case 'Dropdown':
+      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+        className: 'mb-1'
+      }, /*#__PURE__*/React.createElement(Select
+      // options={translateOption(numberOperator, t)}
+      // options={find ? options : column.source ?? []}
+      , {
+        options: source ? source : options ?? [],
+        style: {
+          width: '100%',
+          marginBottom: 8
+        },
+        value: selectedKeys[0],
+        notFoundContent: /*#__PURE__*/React.createElement(Empty, {
+          image: Empty.PRESENTED_IMAGE_SIMPLE,
+          description: locale?.emptyText
+        }),
+        onChange: val => {
+          // setOperatorKey(val)
+          setSelectedKeys(val ? [val] : []);
+        },
+        showSearch: true,
+        allowClear: true
+      }))));
+    case 'Checkbox':
+      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+        className: 'mb-1'
+      }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CheckboxFilter, {
+        locale: locale,
+        selectedKeys: selectedKeys,
+        onSelect: val => {
+          setSelectedKeys(val);
+        }
+        // options={options}
+        ,
+        options: source ? source : options ?? [],
+        filterMultiple: true
+        // open={visible}
+        // searchValue={searchValue}
+        // setSearchValue={setSearchValue}
+      })))));
+    case 'Text':
+    default:
+      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+        className: 'mb-1'
+      }, /*#__PURE__*/React.createElement(Input, {
+        className: "aaaa",
+        classNames: {
+          input: 'filter-input'
+        },
+        placeholder: t ? t('Search') : `Search`,
+        value: selectedKeys[0],
+        onChange: e => setSelectedKeys(e.target.value ? [e.target.value] : [])
+        // onPressEnter={() => handleSearch(selectedKeys as string[], confirm)}
+        ,
+        onPressEnter: () => doFilter?.(true),
+        allowClear: true
+        // autoFocus={true}
+      }))));
+  }
+};

package/es/group-component/hook/convert.d.ts

@@ -0,0 +1 @@
+export declare function convertColumns(columns: any[]): any[];

package/es/group-component/hook/convert.js

@@ -0,0 +1,28 @@
+import { createColumnHelper } from '@tanstack/react-table';
+const columnHelper = createColumnHelper();
+export function convertColumns(columns) {
+  return columns.map(col => {
+    if (col.columns) {
+      // Group column
+      return columnHelper.group({
+        ...col,
+        columns: convertColumns(col.columns) // đệ quy
+      });
+    } else {
+      // Accessor column
+      let accessor;
+
+      // Ưu tiên accessorKey nếu có, nếu không thì dùng hàm row => row[col.id]
+      if (col.accessorKey) {
+        accessor = col.accessorKey;
+      } else if (col.id) {
+        accessor = row => row[col.id];
+      } else {
+        throw new Error('Column không có accessorKey hoặc id');
+      }
+      return columnHelper.accessor(accessor, {
+        ...col
+      });
+    }
+  });
+}

package/es/group-component/hook/useColumns.d.ts

@@ -0,0 +1,28 @@
+import type { Dispatch, SetStateAction } from "react";
+import type { ColumnsTable, ColumnTable, IFormat, SelectionSettings } from '../../grid-component/type';
+import type { Cell, ColumnDef } from '@tanstack/react-table';
+export declare const renderValueCell: <T>(column: ColumnTable<T>, value: any, record: T, rowIndex: number, colIndex: number, format?: IFormat, editAble?: boolean) => any;
+export declare function convertToTanStackColumns<T>({ t, columns, format, editAble }: {
+    t?: any;
+    columns: ColumnsTable<T>;
+    format?: IFormat;
+    editAble?: boolean;
+}): ColumnDef<T, any>[];
+export type ToggleRow<T> = {
+    e: any;
+    cell: Cell<T, unknown>;
+    selectionSettings?: SelectionSettings;
+    isSelectionChange?: {
+        isChange: boolean;
+        type: string;
+        rowData: T;
+        rowsData: T[];
+    };
+    setIsSelectionChange: Dispatch<SetStateAction<{
+        isChange: boolean;
+        type: string;
+        rowData: T;
+        rowsData: T[];
+    }>>;
+};
+export declare const toggleRowSelection: <T>(props: ToggleRow<T>) => void;

package/es/group-component/hook/useColumns.js

@@ -0,0 +1,306 @@
+import React, { Fragment } from 'react';
+import ControlCheckbox from "../components/ControlCheckbox";
+import { checkDecimalSeparator, checkThousandSeparator, countUnselectedChildren, excludeItems, getAllChildren, getFormat, isColor, isEmpty, sortByType, toggleRowAndChildren } from "./utils";
+import { numericFormatter } from 'react-numeric-component';
+import dayjs from 'dayjs';
+import moment from 'moment';
+export const renderValueCell = (column, value, record, rowIndex, colIndex, format, editAble) => {
+  switch (column?.type) {
+    case 'number':
+      const colFormat = typeof column.format === 'function' ? column.format(record) : column.format;
+      const cellFormat = getFormat(colFormat, format);
+      const thousandSeparator = cellFormat?.thousandSeparator;
+      const decimalSeparator = cellFormat?.decimalSeparator;
+      const dec = cellFormat?.decimalScale;
+
+      // const contentNumber = !isEmpty(value) ? ((dec || dec === 0) ? parseFloat(Number(value).toFixed(dec)).toString() : value.toString()) : '0'
+
+      const tmpval = typeof value === 'string' ? Number(value) : value;
+      const numericFormatProps = {
+        thousandSeparator: checkThousandSeparator(thousandSeparator, decimalSeparator),
+        decimalSeparator: checkDecimalSeparator(thousandSeparator, decimalSeparator),
+        allowNegative: cellFormat?.allowNegative ?? true,
+        prefix: cellFormat?.prefix,
+        suffix: cellFormat?.suffix,
+        decimalScale: dec,
+        fixedDecimalScale: cellFormat?.fixedDecimalScale ?? false
+      };
+
+      // if ( typeof value === "string") {
+      //   const ttt =  removeNumericFormat(value, undefined, numericFormatProps )
+      //
+      // }
+
+      const contentNumber = !isEmpty(value) ? dec || dec === 0 ? parseFloat(tmpval.toFixed(dec)).toString() : tmpval.toString() : '0';
+      // const contentNumber = !isEmpty(value) ? ((dec || dec === 0) ? tmpval.toString() : tmpval.toString()) : '0'
+
+      return !isEmpty(contentNumber) ? numericFormatter(contentNumber, numericFormatProps) : '';
+    case 'date':
+      return value ? dayjs(value).format(format?.dateFormat ?? 'DD/MM/YYYY') : '';
+    case 'time':
+      return value ? value : '';
+    case 'year':
+      const year = value ? moment(value).format('yyyy') : '';
+      return /*#__PURE__*/React.createElement(Fragment, null, year);
+    case 'datetime':
+      return value ? moment(value).format(format?.datetimeFormat ?? 'DD/MM/YYYY HH:mm') : '';
+    case 'boolean':
+      return value ? 'true' : 'false';
+    case 'color':
+      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+        className: 'w-100 h-100',
+        style: {
+          backgroundColor: isColor(value) ? value : '#fff',
+          border: '1px solid #f0f0f0',
+          height: '100%',
+          minHeight: 20
+        }
+      }));
+    case 'checkbox':
+      return /*#__PURE__*/React.createElement(ControlCheckbox, {
+        column: column,
+        record: record,
+        rowIndex: rowIndex,
+        colIndex: colIndex,
+        checked: !!value,
+        checkValue: value,
+        editAble: editAble
+      });
+    case 'file':
+      const nameFile = typeof value === 'object' && !Array.isArray(value) ? value.name : Array.isArray(value) ? value.map(it => typeof it === 'object' ? it.name : it).filter(Boolean).join(", ") : '';
+      return value ? nameFile : '';
+    default:
+      if (Array.isArray(value)) {
+        return value.join(', ');
+      }
+      return value;
+  }
+};
+export function convertToTanStackColumns({
+  t,
+  columns,
+  // expanded,
+  // setExpanded,
+  // expandable,
+  format,
+  editAble
+}) {
+  // const expandIconColumnIndex = expandable?.expandIconColumnIndex ?? 0
+
+  return sortByType(columns).map(col => {
+    const {
+      headerText,
+      headerTemplate,
+      field,
+      width,
+      allowResizing,
+      minWidth,
+      template,
+      allowSortering,
+      allowFiltering
+    } = col;
+    const {
+      children,
+      ...restProps
+    } = col;
+    const newCol = {
+      header: () => {
+        if (headerTemplate) {
+          if (typeof headerTemplate === 'function') {
+            return headerTemplate(col);
+          } else {
+            return headerTemplate;
+          }
+        } else {
+          return t ? t(headerText) : headerText;
+          // return field
+        }
+      },
+      cell: props => {
+        const {
+          getValue,
+          cell
+        } = props;
+        const cellValue = props.renderValue() ?? null;
+        const record = cell.row.original;
+        const colIndex = cell.column.getIndex();
+        const rowIndex = cell.row.index;
+        if (template) {
+          if (typeof template === 'function') {
+            return template({
+              field: field ?? '',
+              index: cell.row.index,
+              rowData: cell.row.original,
+              value: getValue()
+            });
+          } else {
+            return template;
+          }
+        } else {
+          return /*#__PURE__*/React.createElement(Fragment, null, renderValueCell(col, cellValue, record, rowIndex, colIndex, format, editAble));
+        }
+      },
+      enableResizing: allowResizing !== false,
+      // enableHiding: false,
+      // enableResizing: true,
+      id: field,
+      size: width,
+      accessorKey: field,
+      sortDescFirst: false,
+      minSize: minWidth,
+      // maxSize: maxWidth,
+      enableSorting: allowSortering !== false,
+      // enableSorting: false,
+      // enableColumnFilter: allowFiltering !== false && !nonActionColumn.includes(field)
+      enableColumnFilter: allowFiltering !== false
+    };
+    if (children) {
+      newCol.size = undefined;
+      // @ts-ignore
+      newCol.columns = convertToTanStackColumns({
+        columns: children,
+        editAble,
+        format,
+        t
+      });
+    }
+    const meta = {
+      ...restProps
+    };
+    if (Object.keys(meta).length > 0) {
+      newCol.meta = meta;
+    }
+    return newCol;
+  });
+}
+export const toggleRowSelection = props => {
+  const {
+    selectionSettings,
+    cell,
+    isSelectionChange,
+    e,
+    setIsSelectionChange
+  } = props;
+  const {
+    row
+  } = cell;
+  const {
+    rowsData
+  } = isSelectionChange ?? {};
+  const prevSelected = rowsData && rowsData.length > 0 ? [...rowsData] : [];
+  if (selectionSettings?.checkStrictly || selectionSettings?.type === 'single') {
+    row.getToggleSelectedHandler()(e);
+    if (row.getIsSelected()) {
+      // đã chọn
+
+      // xóa row ra list selected 
+      const newRowsSelected = prevSelected.filter(it => it.id !== row.id);
+      setIsSelectionChange({
+        isChange: true,
+        type: 'rowSelected',
+        rowData: row.original,
+        rowsData: newRowsSelected ?? []
+      });
+    } else {
+      // chưa selected
+
+      const checkedRows = [...prevSelected, row];
+      setIsSelectionChange({
+        isChange: true,
+        type: 'rowSelected',
+        rowData: row.original,
+        rowsData: selectionSettings?.type === 'single' ? [row] : checkedRows
+      });
+    }
+    return;
+  }
+  if (row.subRows && row.subRows.length > 0) {
+    // click vào row cha
+
+    const allChild = getAllChildren(row);
+    toggleRowAndChildren(row, !row.getIsSelected());
+    if (row.getIsSelected()) {
+      // đã chọn
+
+      // const aaa = isSelectionChange?.rowsData.filter((it) => it.id !== row.id)
+
+      const newRowsSelected = excludeItems(prevSelected, [...allChild, row]);
+      setIsSelectionChange({
+        isChange: true,
+        type: 'rowSelected',
+        rowData: row.original,
+        rowsData: newRowsSelected ?? []
+      });
+    } else {
+      // chưa selected
+
+      let checkedRows = [];
+      if (row.subRows && row.subRows.length > 0) {
+        checkedRows = [...prevSelected, row, ...allChild];
+      } else {
+        checkedRows = [...prevSelected, row];
+      }
+      setIsSelectionChange({
+        isChange: true,
+        type: 'rowSelected',
+        rowData: row.original,
+        rowsData: checkedRows
+      });
+    }
+  } else {
+    // click vào row không có cha
+
+    row.getToggleSelectedHandler()(e);
+    if (row.getIsSelected()) {
+      // đã chọn
+
+      const rowParent = row.getParentRow();
+      // const rowParent1 = row.getParentRows()
+
+      let newCheckedRows = [];
+      if (rowParent) {}
+      if (rowParent && countUnselectedChildren(row) === 1) {
+        newCheckedRows = prevSelected.filter(it => it.id !== row.id && it.id !== rowParent.id);
+      } else {
+        // xóa row ra list selected 
+        // const newRowsSelected = prevSelected.filter((it) => it.id !== row.id)
+        newCheckedRows = prevSelected.filter(it => it.id !== row.id);
+      }
+      setIsSelectionChange({
+        isChange: true,
+        type: 'rowSelected',
+        rowData: row.original,
+        rowsData: newCheckedRows ?? []
+      });
+    } else {
+      // chưa selected
+
+      let checkedRows = [];
+      const rowParent = row.getParentRow();
+
+      // nếu có cha và cha chưa được chọn và tất cả con đã chọn => thêm row cha vào 
+      if (rowParent && !rowParent.getIsSelected() && countUnselectedChildren(row) === 1) {
+        rowParent.toggleSelected(!rowParent.getIsSelected());
+        checkedRows = [...prevSelected, row, rowParent];
+      } else {
+        // chỉ thêm vào row hiện tại
+
+        const isInclude = prevSelected.findIndex(it => it.id === cell.row.id);
+        if (isInclude > -1) {
+          // cập nhật data row hiện tại
+
+          prevSelected[isInclude] = row;
+          checkedRows = [...prevSelected];
+        } else {
+          checkedRows = [...prevSelected, row];
+        }
+      }
+      setIsSelectionChange({
+        isChange: true,
+        type: 'rowSelected',
+        rowData: row.original,
+        rowsData: checkedRows
+      });
+    }
+  }
+};

package/es/group-component/hook/useFilterOperator.d.ts

@@ -0,0 +1,7 @@
+import type { Table } from '@tanstack/react-table';
+import type { FilterOperator } from '../../grid-component/type';
+export declare function useFilterOperator(table: Table<any>): {
+    setFilterOperator: (columnId: string, operator: FilterOperator) => void;
+    getFilterOperator: (columnId: string) => FilterOperator;
+};
+export declare function customStringFilterFn(row: any, columnId: any, filterValue: any): boolean;