PandaGo Components

Appearance

Return to top
On this page

Table

Tables are a highly complex component that seeks to show a large amount of information quickly and at first glance.

Usage

Table title
Full nameVery big header title label that overflowsVery big header title label that overflows
Test 1
Very big body cell content that overflows
Today
Test 2
Very big body cell content that overflows
Yesterday
This is the content of an expanded row!
Test 3
Very big body cell content that overflows
Tomorrow
Test 4
Very big body cell content that overflows
Now
Table title
Full nameVery big header title label that overflowsVery big header title label that overflows
Test 1
Very big body cell content that overflows
Today
Test 2
Very big body cell content that overflows
Yesterday
This is the content of an expanded row!
Test 3
Very big body cell content that overflows
Tomorrow
Test 4
Very big body cell content that overflows
Now

Props

ComponentSkin skinIndicates which skin should be used for the component Default value: ComponentSkin.DESIGN_SYSTEM
pandads
TableHeader[] headersThe headers (therefore columns) to be shown
TableRow[] dataRows of data to display on the table. They must have a property matching the TableHeader.code property set in "headers" prop
boolean borderedIndicates if the table should be bordered or not Default value: false
boolean allowColumnCustomizationIndicates if the table columns visibility can be customized or not Default value: true
boolean isLoadingIndicates if the loading state should be shown or not Default value: false
number loadingRowsIndicates how many rows should be shown in the loading state Default value: 5
string defaultSortIndicates which column should be used to sort the data by default. It uses the TableHeader.code property
defaultSortDirectionIndicates the direction of the sorted data by default Default value: asc
boolean rowsAreClickableIndicates if the rows can be clicked or not Default value: true
(datum: any) => boolean isClickableA function that receives a row and returns a boolean indicating if the row is clickable or not Default value: () => true
boolean showTooltipsFlag to show or hide the tooltips in the table cells Default value: true

Slots

titleThis title is shown at the top of the table to give it more context
header:<code>Each header cell has this slot, that is optional and uses the code of the TableHeader to see which header should be used. In the example, the "Full name" header has the code "user_name", and we will use it to show the example of this slotheaderTableHeader
cell:<code>Each row cell has this slot, that is optional and uses the code of the TableRow to see which column should be used. In the example, the "Full name" column has the code "user_name", and we will use it to show the example of this slotdatumany
cell-icon:<code>Each row cell has this slot, that is optional and is usually used to set an icon next to the cell content
expandedThis slot is what is shown when a row is expanded in the subrow. It can be any type of data, by using the "datum" scope of the slotdatumany
loading-cell:<code>Each column can have a different loading skeleton. Use this slot to change it.
empty-actionCustomize the message appearing when the table is empty (for the example, setting content to this slot will empty the table to show the message)
footerContent in the <tfoot> of the table

Events

SortEvent sortEmitted when the user clicks on a sortable header to sort the table
any click:rowEmitted when the user clicks on a clickable row. The value emitted is the row data

Type declarations

SortEvent

ts
export interface SortEvent {
	field: string,
	direction: DirectionTypes.ASC | DirectionTypes.DESC | DirectionTypes.DEFAULT,
}

TableHeader

ts
export interface TableHeader {
	code: string;
	label: string;
	type?: SortingTypes.NUMERICAL | SortingTypes.ALPHABETICAL; 
	width?: string;
	order?: number;
}

TableRow

ts
export interface TableRow {
	[key: string | number]: any;
	selectable?: boolean;
	radioed?: boolean;
	selected?: boolean;
	expandable?: boolean;
	expanded?: boolean;
}

ComponentSkin

ts
export enum ComponentSkin {
	PANDA = 'panda',
	DESIGN_SYSTEM = 'ds',
}