import { Table, Column } from "wis/table";

Height Settings#

For convenience, we provide three common table height setting methods

Follow Content Height#

Fixed Table Height#

Auto Fill Container#

Data Loading#

In addition to static data loading through the data property, the table component can also implement server-side data loading by passing a data request function to the data property

Server-side Loading#

Manual Trigger#

Sorting Functionality#

The table component supports single-column sorting, multi-column sorting, and sorting mode configuration, while also supporting server-side sorting

Single Column Sorting#

Multi-column Sorting#

Configure multi-level sorting functionality through the priority field of sortable columns, where smaller values have higher priority

Sorting Mode#

The table supports two sorting modes: reset and toggle mode, with reset being the default

Server-side Sorting#

Server-side sorting also supports single-column sorting, multi-column sorting, and sorting mode configuration. Here's an example of single-column server-side sorting

Header Settings#

Fixed Header#

There are two ways to implement fixed headers: the first is by setting fixed table height, and the second is by setting auto fill container.

Multi-level Header#

Header Merging#

Column Settings#

Column Fixed#

Middle Column Fixed#

API Reference#

Table#

Name	Type	Default	Description
title	string	none	Table title
data	R[] TableAjax	none	Table data
params	object	none	Parameters passed when calling TableAjax
separator	stripe border	none	Table row separator
rowKey	string (record: R) => string	key	Row unique key
sortMode	reset toggle	none	Sorting mode
manual	boolean	false	When configuring TableAjax, whether to manually trigger table data loading
height	number auto	none	Table height control, auto follows container height
onSortChange	(sort?: Sort | Sort[]) => void	none	Event triggered when sorting changes
onLoad	(response: TableResponse<R>) => void	none	Event triggered when asynchronous data loading is complete

Column#

Name	Type	Default	Description
title	string	none	Column title
name	string	none	Column name
sortable	boolean Compare<R> Sortable<R>	none	Configure column sorting rules
ellipsis	boolean	none	Set text overflow ellipsis
minWidth	number	none	Column minimum width
width	number	none	Column width
maxWidth	number	none	Column maximum width
align	left center right	none	Column content alignment
visible	boolean	none	Controlled mode to control column display state
defaultVisible	boolean	none	Uncontrolled mode to control column default display state
pinned	left right	none	Controlled mode to control column fixed position state
defaultPinned	left right	none	Uncontrolled mode to control column default fixed position state
colSpan	number	none	Set column header merge count

Methods#

Method Name	Definition	Description
query	(option?: QueryOption<P>) => Promise<TableResponse<R>>	Trigger table data loading
getData	() => R[]	Get table data
setColumnVisible	(name: string, visible: boolean) => void	Set column visibility
setColumnsVisible	(data: Record<string, boolean>) => void	Batch set columns visibility
setColumnPinned	(name: string, pinned?: "left" | "right") => void	Set column pinning
setColumnsPinned	(data: Record<string, undefined | "left" | "right">) => void	Batch set columns pinning
setColumnSort	(name: string, type?: "asc" | "desc") => void	Set column sorting