Table
Container properties
All component configurations support Container properties at the first level.
Component properties
| Name | Type | Default | Supports Variable Pattern | Description |
|---|---|---|---|---|
| className | string | ✔️ | The className of the component | |
| style | object | The style of the component | ||
| columnDefs | object | ag-grid column definition | ||
| defaultColDef | object | Default column definition | ||
| dataSource | { token: string, pbcToken: string, listUrl: string } | data source | ||
| dataUrl | string | ✔️ | Get all tabular data at once with dataUrl | |
| pinnedTopDataUrl | string | ✔️ | Row data pinned to the top of the table | |
| pinnedBottomDataUrl | string | ✔️ | Line data fixed to the bottom of the table | |
| dataFilters | ConditionalListPropertyPropType(DataFilters) | ✔️ | Fixed filter conditions hidden by requesting data source cannot be changed through the interface | |
| translateDataResponse | bool | false | Is the translation request result required | |
| httpMethod | 'get' | 'post' | 'get' | ️ | The http method used to send a request when obtaining data |
| httpBody | object | ️ ✔️ | Get the request data when sending the post request, and it will overwrite the automatic generated body | |
| selectColId | Array<string> | Loaded data fields, all fields will be loaded without configuration. | ||
| needCount | bool | true | ️ | Whether the number of queries is required for requests |
| searchTextColIds | Array<string> | Specify the drop-down box to blur the search field, if not specified, search globally | ||
| suppressToolbar | ConditionalPropertyPropType(bool) | false | ✔️ | Prohibited Toolbar |
| suppressToolbarActions | ConditionalPropertyPropType(bool) | false | ✔️ | All operation buttons for Toolbar |
| suppressAddButton | ConditionalPropertyPropType(bool) | false | ✔️ | Disable "Add" buttons |
| suppressFuzzySearch | ConditionalPropertyPropType(bool) | false | ✔️ | Forbidden fuzzy search |
| suppressFuzzySearchSpeech | ConditionalPropertyPropType(bool) | false | ✔️ | Voice search function that prohibits fuzzy search |
| suppressColumnSelect | ConditionalPropertyPropType(bool) | false | ✔️ | "Show /Hide" columns are prohibited |
| suppressExcelExport | ConditionalPropertyPropType(bool) | false | ✔️ | Disable Excel export function |
| suppressToolbarRefresh | ConditionalPropertyPropType(bool) | false | ✔️ | Disable the "Refresh" button on the toolbar |
| suppressTableSetting | ConditionalPropertyPropType(bool) | false | ✔️ | Prohibit the toolbar to expand the setting function |
| suppressFullscreen | ConditionalPropertyPropType(bool) | false | ✔️ | Disable the full-screen feature |
| suppressSaveSetting | ConditionalPropertyPropType(bool) | false | ✔️ | Forbid to save table settings |
| suppressFilterPanel | ConditionalPropertyPropType(bool) | false | ✔️ | Disables the toolbar's Filter panel |
| suppressFavoriteView | ConditionalPropertyPropType(bool) | false | ✔️ | Save multiple Views are prohibited |
| supportShowDeleted | ConditionalPropertyPropType(bool) | false | ✔️ | Whether the "Show deleted" function is supported |
| suppressRefreshDataWhenFilterChange | ConditionalPropertyPropType(bool) | false | ✔️ | It is prohibited to automatically refresh data after modifying filter conditions in Filter Panel. |
| settingKey | string | Table settings saved key | ||
| tableSize | 'default' | 'small' | 'default' | Table size, default or compact mode | |
| addButtonHref | ConditionalPropertyPropType(string) | false | ✔️ | Added link address of the button |
| addButtonContent | string | false | Added text for buttons | |
| fuzzySearchPlaceholder | string | false | Placeholder of fuzzy search input box | |
| fuzzySearchOpen | bool | false | Whether the fuzzy search will be displayed forever | |
| excelExportFilename | string | 'export' | Export Excel file name | |
| excelExportMaxSizePerReq | number | 1000 | How many rows are the requests for exporting Excel sent in batches | |
| pagination | bool | false | Whether to use the paging function | |
| paginationPageSize | number | 30 | The number of rows displayed per page of the paging function | |
| pinnedFilter | Array<string> | Whether to use the regular refresh data function | ||
| interval | bool | false | Whether to use the regular refresh data function | |
| intervalTime | number | 10 | The interval between the tables regularly refreshing data (s) | |
| toolbarFields | array | Custom elements of toolbar configured using json | ||
| toolbarChildren | node | Custom elements of toolbar configured using jsx | ||
| alwaysUseApiFilter | bool | false | When in clientSide mode, filtering is also performed using the API interface rather than the table's own filtering function. | |
| multiValueKey | string | 'label' | Data attributes used by table ACL and Select functions when filtering and grouping columns that call MultiValueCellRenderer | |
| onSwitchFavoriteView | (newView) => void | This function is called when the table toolbar switches views |
All the remaining componentsProps will be passed to the component root element（AgGridReact）。
JS API
The interface obtained through formApi.getFieldApi() is as follows:
| Name | Type | Description |
|---|---|---|
| node | HTML Element | Component root DOM element |
| gridApi | object | Ag-Grid's api interface, official document |
| getComponentProps | () => object | Get the component properties of the table componentProps |
| updateComponentProps | () => void | Modify the component properties of the table componentProps, [Example](/docs/platform/frontend/use-component/use-table# Dynamically modify table columns) |
| getTableState | () => { tableSize, columnState, filterModel, paginationPageSize } | Get the current table status |
| getSearchText | () => string | Get the current fuzzy search text |
| getSelectedIds | () => array | Get the id of the row selected in the current table, and return the array regardless of multiple choices |
| refresh | () => void | Refresh table data |