import { ColumnProps, TablePaginationConfig } from 'antd/es/table'; import { SorterResult, ColumnFilterItem, FilterDropdownProps, TableAction } from 'antd/es/table/interface'; import React, { ReactText } from 'react'; import { MainStore, HasId, MayHaveInstanceName, Metadata, MetaPropertyInfo, PaginationChangeCallback, ComparisonType, FilterChangeCallback, JmixEntityFilter, JmixSortOrder, SortOrderChangeCallback } from '@haulmont/jmix-react-core'; import { Key } from 'antd/es/table/interface'; import { FormInstance } from 'antd/es/form'; export interface DataColumnConfig { propertyName: string; entityName: string; /** * Whether to enable a filter for this column */ enableFilter: boolean; /** * An object received in antd {@link https://ant.design/components/table | Table}'s `onChange` callback, * it is a mapping between column names and currently applied filters. */ filters: Record | undefined; /** * See {@link DataTableCustomFilterProps.operator} */ operator: ComparisonType | undefined; onOperatorChange: (operator: ComparisonType, propertyName: string) => void; /** * See {@link DataTableCustomFilterProps.value} */ value: any; onValueChange: (value: any, propertyName: string) => void; /** * Whether to enable sorting on this column */ enableSorter: boolean; mainStore: MainStore; /** * See {@link DataTableCustomFilterProps.customFilterRef} */ customFilterRef?: (instance: FormInstance) => void; relationOptions?: Array; } /** * @remarks * It is possible to create a vanilla antd `Table` and customize some of its columns * with `DataTable`'s custom filters using this helper function. * * NOTE: it might be simpler to achieve the desired result using {@link DataTableProps.columnDefinitions}. * * @param config * * @example * ```typescript jsx * import * as React from "react"; * import {action, observable} from 'mobx'; * import {observer} from "mobx-react"; * import {Table,} from "antd"; * import {Car} from "../../cuba/entities/mpg$Car"; * import { * collection, injectMainStore, MainStoreInjected, * generateDataColumn, ComparisonType, handleTableChange, * } from "@cuba-platform/react"; * import {injectIntl, WrappedComponentProps} from 'react-intl'; * import {PaginationConfig} from 'antd/es/pagination'; * import { SorterResult } from "antd/es/table"; * * @injectMainStore * @observer * class CarTableComponent extends React.Component { * * dataCollection = collection(Car.NAME, {view: 'car-edit', sort: '-updateTs'}); * * fields = ['purchaseDate','price','regNumber']; * * @observable.ref filters: Record | undefined; * @observable operator: ComparisonType | undefined; * @observable value: any; * * @action * handleOperatorChange = (operator: ComparisonType) => this.operator = operator; * * @action * handleValueChange = (value: any) => this.value = value; * * @action * handleChange = (pagination: PaginationConfig, tableFilters: Record, sorter: SorterResult): void => { * this.filters = tableFilters; * * handleTableChange({ * pagination: pagination, * filters: tableFilters, * sorter: sorter, * defaultSort: '-updateTs', * fields: this.fields, * mainStore: this.props.mainStore!, * dataCollection: this.dataCollection * }); * }; * * render() { * * return ( * {text} }, * { title: 'Price', dataIndex: 'price', key: 'price' }, * generateDataColumn({ * propertyName: 'regNumber', * entityName: this.dataCollection.entityName, * filters: this.filters, * operator: this.operator, * onOperatorChange: this.handleOperatorChange, * value: this.value, * onValueChange: this.handleValueChange, * enableSorter: true, * mainStore: this.props.mainStore! * }) * ]} * onChange={this.handleChange} * pagination={{ * showSizeChanger: true, * total: this.dataCollection.count, * }} * /> * ); * } * * } * * const CarTable = injectIntl(CarTableComponent); * * export default CarTable; * ``` * */ export declare function generateDataColumn(config: DataColumnConfig): ColumnProps; /** * Generates a standard antd table column filter for enum fields. * * @param propertyInfo */ export declare function generateEnumFilter(propertyInfo: MetaPropertyInfo, metadata: Metadata): ColumnFilterItem[]; export declare function generateCustomFilterDropdown(propertyName: string, entityName: string, operator: ComparisonType | undefined, onOperatorChange: (operator: ComparisonType, propertyName: string) => void, value: any, onValueChange: (value: any, propertyName: string) => void, customFilterRefCallback?: (instance: FormInstance) => void, relationOptions?: Array): (props: FilterDropdownProps) => React.ReactNode; /** * * @param tableFilters * @param onFilterChange * @param entityName * @param fields * @param metadata * @param apiFilters */ export declare function setFilters(tableFilters: Record | null>, onFilterChange: FilterChangeCallback, entityName: string, fields: string[], metadata: Metadata, apiFilters?: JmixEntityFilter[]): void; /** * * @param sorter * @param onSortOrderChange * @param defaultSort */ export declare function setSorter(sorter: SorterResult | Array>, onSortOrderChange: SortOrderChangeCallback, defaultSort?: JmixSortOrder): void; /** * @typeparam E - entity type */ export interface TableChangeShape { /** * Received in antd {@link https://ant.design/components/table | Table}'s `onChange` callback */ pagination: TablePaginationConfig; /** * Received in antd {@link https://ant.design/components/table | Table}'s `onChange` callback */ tableFilters: Record | null>; apiFilters?: JmixEntityFilter[]; onFilterChange: FilterChangeCallback; /** * Received in antd {@link https://ant.design/components/table | Table}'s `onChange` callback */ sorter: SorterResult | Array>; /** * Default sort order. */ defaultSortOrder?: JmixSortOrder; onSortOrderChange: SortOrderChangeCallback; onPaginationChange: PaginationChangeCallback; /** * Names of the entity properties that should be displayed. */ fields: string[]; metadata: Metadata; entityName: string; /** * What has triggered the callback: change in pagination, sorters or filters. */ tableAction: TableAction; } /** * When called from antd {@link https://ant.design/components/table | Table}'s `onChange` callback * this function will reload data collection taking into account `Table`'s filters, sorter and pagination. * * @typeparam E - entity type. * * @param tableChange */ export declare function handleTableChange(tableChange: TableChangeShape): void; export declare function graphqlFilterToTableFilters(initialFilter: JmixEntityFilter, fields?: string[]): Record; export declare function getPreservedConditions(filters: JmixEntityFilter[], fields: string[]): JmixEntityFilter[];