Options
All
  • Public
  • Public/Protected
  • All
Menu

Module ui/table/DataTableHelpers

Index

Interfaces

Functions

Functions

entityFilterToTableFilters

  • entityFilterToTableFilters(entityFilter: EntityFilter, fields?: string[]): Record<string, any>

  • Converts EntityFilter to antd table filters object. Useful e.g. to set the initial state of table filters when the table is loaded with a predefined EntityFilter.

    Parameters

    • entityFilter: EntityFilter
    • Optional fields: string[]

      names of the entity properties displayed in the table. Allows to check the EntityFilter.conditions against the list of displayed fields and ensure that only the conditions related to the displayed fields are used.

    Returns Record<string, any>

generateCustomFilterDropdown

  • 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): (props: FilterDropdownProps) => React.ReactNode

  • Parameters

    • propertyName: string
    • entityName: string
    • operator: ComparisonType | undefined
    • onOperatorChange: (operator: ComparisonType, propertyName: string) => void
    • value: any
    • onValueChange: (value: any, propertyName: string) => void
        • (value: any, propertyName: string): void

        • Parameters

          • value: any
          • propertyName: string

          Returns void

    • Optional customFilterRefCallback: (instance: FormInstance) => void
        • (instance: FormInstance): void

        • Parameters

          • instance: FormInstance

          Returns void

    Returns (props: FilterDropdownProps) => React.ReactNode

      • (props: FilterDropdownProps): React.ReactNode

      • Parameters

        • props: FilterDropdownProps

        Returns React.ReactNode

generateDataColumn

  • generateDataColumn<EntityType>(config: DataColumnConfig): ColumnProps<EntityType>
  • 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 DataTableProps.columnDefinitions.

    example
     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<MainStoreInjected & WrappedComponentProps> {

  dataCollection = collection<Car>(Car.NAME, {view: 'car-edit', sort: '-updateTs'});

  fields = ['purchaseDate','price','regNumber'];

  @observable.ref filters: Record<string, string[]> | 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<string, string[]>, sorter: SorterResult<Car>): 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 (
      <Table
        dataSource={this.dataCollection.items.slice()}
        columns={[
          { title: 'Purchase Date', dataIndex: 'purchaseDate', key: 'purchaseDate', render: (text: any) => <b>{text}</b> },
          { 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;

    Type parameters

    • EntityType

    Parameters

    Returns ColumnProps<EntityType>

generateEnumFilter

  • generateEnumFilter(propertyInfo: MetaPropertyInfo, mainStore: MainStore): ColumnFilterItem[]

  • Generates a standard antd table column filter for enum fields.

    Parameters

    • propertyInfo: MetaPropertyInfo
    • mainStore: MainStore

    Returns ColumnFilterItem[]

handleTableChange

  • handleTableChange<E>(tableChangeDTO: TableChangeDTO<E>): Promise<void>

  • When called from antd Table's onChange callback this function will reload data collection taking into account Table's filters, sorter and pagination.

    Type parameters

    • E

      entity type.

    Parameters

    Returns Promise<void>

isConditionsGroup

  • isConditionsGroup(conditionOrConditionsGroup: Condition | ConditionsGroup): boolean

isPreservedCondition

  • isPreservedCondition(condition: Condition | ConditionsGroup, fields: string[]): boolean

  • Determines whether a condition shall be preserved in DataCollectionStore when clearing table filters.

    remarks

    Preserved conditions include ConditionGroups and conditions on fields that are not displayed in the table. Effectively they act as invisible filters that cannot be disabled.

    Parameters

    • condition: Condition | ConditionsGroup
    • fields: string[]

      names of the entity properties displayed in the table

    Returns boolean

setFilters

  • setFilters<E>(tableFilters: Record<string, (ReactText | boolean)[] | null>, fields: string[], mainStore: MainStore, dataCollection: DataCollectionStore<E>): void

  • Sets filters on provided dataCollection based on current state of table filters

    Type parameters

    • E

    Parameters

    • tableFilters: Record<string, (ReactText | boolean)[] | null>
    • fields: string[]
    • mainStore: MainStore
    • dataCollection: DataCollectionStore<E>

    Returns void

setSorter

  • setSorter<E>(sorter: SorterResult<E> | SorterResult<E>[], defaultSort: string | undefined, dataCollection: DataCollectionStore<E>): void

  • Sets sort field/order on provided dataCollection based on current state of table sorter.

    Type parameters

    • E

    Parameters

    • sorter: SorterResult<E> | SorterResult<E>[]
    • defaultSort: string | undefined

      name of the field to be sorted by. If the name is preceeding by the '+' character, then the sort order is ascending, if by the '-' character then descending. If there is no special character before the property name, then ascending sort will be used.

    • dataCollection: DataCollectionStore<E>

    Returns void

Generated using TypeDoc