MaTable

A Table component based on the secondary encapsulation of Element Plus, supporting all native table parameters, events, and slots, while enhancing some functionalities for ease of use.

Note

Since it fully supports all parameters, events, and slots of the native el-table, the documentation only covers extended parameters.

For official parameters, please refer to the Element Plus official documentation.

Note: Displayed language pack inconsistencies in the demo component are normal and will not occur in the actual project.

Basic Usage

Full Examples

Basic Feature Examples

• Basic Table - Basic data display and configuration
• Table Sorting - Various sorting function demonstrations
• Table Filtering - Filtering and search functionalities

Advanced Feature Examples

• Custom Rendering - Custom rendering for cells and headers
• Dynamic Column Management - Dynamic addition, deletion, and modification of columns
• Pagination Table - Complete pagination functionality

Special Scenario Examples

• Tree Table - Displaying hierarchical data
• Selection Table - Selection and batch operations
• Responsive Table - Adaptive height and responsive layout

Props

Parameter	Description	Type	Ele Official Documentation	Version
options	el-table parameters and extended parameters	MaTableOptions	Table Attributes	1.0.0
columns	el-table-column parameters and extended parameters	MaTableColumns[]	Table Column Attributes	1.0.0

Type Description

• MaTableOptions: Extends all native properties of Element Plus tables and adds configuration options like container height, loading state, alignment, adaptive height, pagination, etc.
• MaTableColumns[]: Extends all native properties of Element Plus table columns and adds features like column hiding, custom rendering, multi-level headers, etc.

ExtraProps

Note

These are extended parameters of ma-table for el-table.

Parameter	Description	Type	Default	Version
containerHeight	Container height	string	-	1.0.0
loading	Enable loading animation	boolean	false	1.0.0
loadingConfig	Loading animation configuration	LoadingConfig	-	1.0.0
columnAlign	Cell alignment	left, center, right	center	1.0.0
headerAlign		left, center, right	-	1.0.0
showOverflowTooltip		boolean	false	1.0.0
adaption	Enable adaptive height	boolean	false	1.0.0
adaptionOffsetBottom	Bottom offset distance	number	70	1.0.0
showPagination	Show pagination	boolean	true	1.0.0
pagination	El pagination native properties/events	el-pagination documentation	-	1.0.0
on	el-table table event collection		-	1.0.0

LoadingConfig Description

Parameter	Description	Type	Default	Version
text	Loading text displayed below the icon	string	-	1.0.0
spinner	Custom loading icon	string	-	1.0.0
svg	Custom svg loading icon	string	-	1.0.0
viewBox	Loading icon size	string	-	1.0.0
background	Background overlay color	string	-	1.0.0
customClass	Custom class name	string	-	1.0.0

ColumnExtraProps

Note

These are extended parameters of ma-table for el-table-column.

Parameter	Description	Type	Default	Version
hide	Hide column	boolean	false	1.0.0
children	Multi-level header	MaTableColumns[]	-	1.0.0
cellRender		(data: TableColumnRenderer) => {}	-	1.0.0
headerRender		(data: TableColumnRenderer) => {}	-	1.0.0

Slot

Name	Description	Parameters	Example
empty	Native slot, displayed when data is empty	-	#empty
append	Native slot, displayed in the last row of the table	-	#append
pageLeft	Left area slot in the pagination row	-	#pageLeft
column-[prop]	Table column slot; prop is the field name	{ row, column, $index }	#column-name="{ row }"
header-[prop]	Table header slot; prop is the field name	{ column, $index }	#header-name="{ column }"
default	Default column content slot	{ row, column, $index }	#default="{ row }"
header	Default header content slot	{ column, $index }	#header="{ column }"
filterIcon	Custom filter icon slot	-	#filterIcon

Slot Parameter Description

• scope parameters: row represents the current row data, column represents the current column configuration, $index represents the current row index.
• Dynamic slots: [prop] in column-[prop] and header-[prop] needs to be replaced with the actual field name.
• Pagination slot: The pageLeft slot can be used to add custom content on the left side of the pagination area, such as batch operation buttons.

Event

Name	Description	Parameters	Trigger Condition
set-data-callback	Callback after setting table data	data: any[]	Triggered after calling the setData method

Event Description

In addition to the extended events above, ma-table also supports all native events of Element Plus tables, such as select, select-all, selection-change, cell-click, row-click, etc. These events can be configured via the options.on object.

Expose

Name	Description	Parameters	Return Value	Usage Scenario
setData()	Set table data	data: any[]	-	Dynamically update table data
setPagination()	Set pagination parameters	pagination: PaginationProps	-	Update pagination configuration
setLoadingState()	Set table loading state	loading: boolean	-	Control loading state
setOptions()	Set ma-table configuration	options: MaTableOptions	-	Dynamically update table configuration
getOptions()	Get ma-table configuration	-	MaTableOptions	Get current configuration
setColumns()	Set table columns	columns: MaTableColumns[]	-	Reset all columns
getColumns()	Get table columns	-	MaTableColumns[]	Get current column configuration
appendColumn()	Append a table column	column: MaTableColumns	-	Dynamically add a new column
removeColumn()	Remove a table column	prop: string	-	Dynamically delete a specified column
getColumnByProp()	Get a table column by prop	prop: string	MaTableColumns	Get a specific column configuration
getElTableRef()	Get el-table Ref	-	Ref<ElTable>	Access native table methods

Expose Method Description

• Data Methods: setData, setPagination, setLoadingState for dynamically updating table state.
• Configuration Methods: setOptions, getOptions for dynamically modifying table configuration.
• Column Management Methods: setColumns, getColumns, appendColumn, removeColumn, getColumnByProp provide comprehensive column management.
• Native Access: getElTableRef can obtain the native Element Plus table instance and call all native methods.

Full Type Definitions

MaTableOptions Interface

interface MaTableOptions {
  // Container and Loading
  containerHeight?: string
  loading?: boolean
  loadingConfig?: LoadingConfig
  
  // Alignment
  columnAlign?: 'left' | 'center' | 'right'
  headerAlign?: 'left' | 'center' | 'right'
  
  // Display Options
  showOverflowTooltip?: boolean
  pagination?: PaginationProps
  
  // Adaptive Height
  adaption?: boolean
  adaptionOffsetBottom?: number
  showPagination?: boolean
  
  // Element Plus Native Properties
  data?: any[]
  height?: string | number
  maxHeight?: string | number
  stripe?: boolean
  border?: boolean
  size?: 'large' | 'default' | 'small'
  fit?: boolean
  showHeader?: boolean
  highlightCurrentRow?: boolean
  currentRowKey?: string | number
  // ... more Element Plus properties
  
  // Event Handling
  on?: {
    [eventName: string]: (...args: any[]) => void
  }
}

MaTableColumns Interface

interface MaTableColumns {
  // Extended Properties
  hide?: boolean | ((column: MaTableColumns) => boolean)
  children?: MaTableColumns[]
  cellRender?: (data: TableColumnRenderer) => VNode | string
  headerRender?: (data: TableColumnRenderer) => VNode | string
  
  // Element Plus Native Properties
  label?: string
  prop?: string
  type?: 'selection' | 'index' | 'expand'
  width?: string | number
  minWidth?: string | number
  fixed?: boolean | 'left' | 'right'
  align?: 'left' | 'center' | 'right'
  headerAlign?: 'left' | 'center' | 'right'
  sortable?: boolean | 'custom'
  // ... more Element Plus column properties
}

TableColumnRenderer Interface

interface TableColumnRenderer {
  row: any          // Current row data
  column: TableColumn   // Current column configuration
  $index: number    // Current row index
  options: TableColumn  // Column options
  attrs: any        // Other attributes
}