Table

Basic Usage

iTable is with white background, and has three areas, which are the top operation area, the middle table area, and the bottom pagination area. The top operation area and the bottom pagination area can be empty.

The content in left of top operation area can be fully customized through slot, and the right side has default functions of exporting table data, refreshing data and customizing columns. The default export function is implemented in front-end, developers can also implement it by themselves. refresh function should call API, developers need to implement it by themselves.

Columns can be configured with sorting and filtering functions, which are implemented locally in front-end, and no need to call API again.

iTable supports nested data display, and can display nested data according to the chained attribute access rule, such as a.b.c.

Customize Top Operation Area

Customize the content on the left side of the top operation area through header-left slot

Customize the content on the right side of the top operation area through header-right slot

Tool Buttons on the Right Side of Top Operation Area

The toolButton attribute can selectively enable the function buttons on the right side of the top operation area by configuring it. The configuration format is ['refresh', 'download', 'setting'], respectively corresponding to the refresh, export, and column definition functions. The default is to enable all.

Enable Export Function

In order to enable the export function, the toolButton attribute contains the download field. The export callback event is triggered by binding the export event in the v-on of the custom export event. If no custom export event is bound, the default export is the data currently displayed in the table.

Enable Refresh Function

In order to enable the refresh function, the toolButton attribute contains the refresh field. The refresh callback event is triggered by binding the refresh event in the v-on of the custom refresh event.

Enable Column Definition Function

the column definition function is enabled by the toolButton attribute containing the setting field. It contains column sorting and fixing functions.

Index Column

• indexConfig controls the visibilty of the index column, the default value is { display: true, mode: 'continuous', width: 100 }, where mode can be set to discrete to make the index column non-continuous after pagination.

• The index slot can be used to customize the index column.

Row Selection

• rowKey should be set to a unique identifier for each row, when the row selection function is enabled.

• The selectable field can be used to disable the selection of a row. The selectable field is a function that returns true/false to control whether a row can be selected.

Multiple Selection

Configure selectionMode = 'multiple' to enable multiple selection. When multiple selection is enabled, the function button for displaying selected data will appear in the upper right corner of the table.

Single Selection

Configure selectionMode = 'single' to enable single selection.

Default Selected Rows

Call the toggleRowSelection method of the table ref object to set the initial default selected rows. You can pass the second parameter as true/false to control whether the row is selected or not.

Get Selected Data

You can get the current selected data by the selectedRows attribute of the table ref object. You can bind the selectionChange event to get the current selected data when the row selection status changes.

Custmized Content

In columns attribute, set slotName attribute for a column, and then customize the content of that column through slots.

Inline Editing

• iTable has built-in inline editing functionality. To enable inline editing, set the __lineEdit field in the table data to control which rows can be edited. When using inline editing, it is necessary to configure the rowKey field as the unique identifier for each row.

• The inlineEditType property can be set to specify the editing type. Currently, four types are supported: number, select, date, and input. The default type is input. When inlineEditType is set to select, the inlineEditOptions property must be set to specify the dropdown options.

• The input type is implemented by element-plus components. If you need to pass other properties to element-plus components when editing inline, you can configure the inlineEditProps property.

• Columns with custom content cannot automatically enable inline editing mode and need to be developed by themselves.

• Note: Columns with chained access (a.b.c) cannot use inline editing mode. Otherwise, the data cannot be updated correctly.

Sorting and Filtering

Sorting

The showSort: true attribute in the column configuration can enable the sorting function for this column. After enabling, a pair of up and down arrows will appear after the column title. Clicking one of them will trigger the sorting event, and this arrow will be highlighted. Clicking the highlighted arrow again will cancel the sorting. The sorting implementation is front-end sorting and does not require calling the back-end interface.

Filtering

• The showFilter: true attribute in the column configuration can enable the filtering function for this column. After enabling, a filter icon will appear after the column title. Clicking the icon will pop up a window. By default, the window contains an input box. After entering the content to be filtered, the filter event will be triggered automatically. The filtering implementation is front-end filtering and does not require calling the back-end interface.
• The default component type of the filter is input box. Optional values include select, date, daterange, and number selectors. The component type can be set through the filterType attribute. When using the select type, you need to set the filterOptions attribute to specify the drop-down options. When using daterange, you can configure the date format through the filterFormat attribute, which defaults to YYYY-MM-DD.

Expand Rows

set showExpandCol = true to expand and collapse the table. After expanding, the expanded content can be displayed. The expanded content can be customized through the expand slot.

Drag and Sort

set dragSort attribute to true to enable row drag and sort. After dragging and sorting, the dragSortChange event will be triggered, returning the new data list and old and new index values

The default row drag and sort only changes the ui display order and does not change the original data order. Therefore, when using drag and sort, you must update the original data to the sorted data in the dragSortChange callback event to ensure that other functions of the table work normally

Pagination

if you want to enable pagination, configure the pagination, total attributes, which are objects containing the following properties:

• pageNum：Current page number
• pageSize：Number of items per page
• pageSizes：Number of items per page drop-down options
• total：Total number of data items The paginationChange event can be used to monitor pagination changes, which is triggered when the pagination button or number of items per page is selected

API

Attributes

Table

Name	is Required	Description	Type	Default Value Description
tableData	Yes	data of table	Array	-
columns	Yes	configuration of columns	Array<ColDef>	-
pagination	No	configuration of pagination	PagiDef	-
toolButton	No	setting of tool buttons on the top-right of table	Array/Boolean	false
selectionMode	No	selection mode('single'/'multiple')	String	none
indexConfig	No	configuration of index column	Object	{display: true, mode: 'continuous'}
rowKey	No	unique identifier of each row	String	-
showExpandCol	No	whether show expand icon column	Boolean	false

ColDef

Name	is Required	Description	Type	Default Value Description
label	Yes	name of column	String	-
prop	Yes	attribute name in data to display	String	-
width	No	width of column	Number	-
showSort	No	whether enable sort function	Boolean	false
showFilter	No	whether enable filter function	Boolean	false
filterType	No	type of filter	String	'input'
filterOptions	No	filter options, only valid if filterType is select	Array	[]
inlineEditType	No	cell input type when in editing mode	String	'input'
inlineEditOptions	No	options of cell input, only valid if inlineEditType is select	Array	[]

PagiDef

Name	is Required	Description	Type	Default Value Description
pageNum	No	current page number	Number	-
pageSize	No	item count of each page	Number	-
pageSizes	No	options of item count per page	Array	-
total	No	total amount of items	Number	0

iTable is a secondary encapusulation of the Table component of element plus. For more configuration, please refer to Table

Event

Name	Description	Parameters
paginationChange	triggers when pageNum or pageSize changes	{pageNum, pageSize}
selectionChange	triggers when one row is selected	Array<Row>
refresh	triggers when refresh button is clicked	-
export	triggers when export buttion is clicked	-

Table Slot

Slot Name	Description
header-left	top-left area above table
header-right	top-right area above table
expand	expanded content of each row
index	content of index cell

Expose

Name	Type	Description
selectedRows	attr	selected rows
toggleRowSelection	method	toggle the selection status of rows
clearSelection	method	clear current selected rows