Skip to main content

Table

A table displays rows of data.

When To Use#

  • To display a collection of structured data.
  • To sort, search, paginate, filter data.

Examples#

import { Table } from 'tailor-ui';

Basic Table#

NamePlatformPeopleAmmountAction
Name 1Platform 110,000NTD 1,000
Name 2Platform 210,000NTD 1,000
Name 3Platform 310,000NTD 1,000
DisabledDisabled10,000NTD 1,000

With maxHeight#

NamePlatformPeopleAmmountAction
Name 1Platform 110,000NTD 1,000
Name 2Platform 210,000NTD 1,000
Name 3Platform 310,000NTD 1,000
Name 4Platform 410,000NTD 1,000
Name 5Platform 510,000NTD 1,000
Name 6Platform 610,000NTD 1,000
Name 7Platform 710,000NTD 1,000
Name 8Platform 810,000NTD 1,000
Name 9Platform 910,000NTD 1,000
Name 10Platform 1010,000NTD 1,000
Name 11Platform 1110,000NTD 1,000
Name 12Platform 1210,000NTD 1,000
Name 13Platform 1310,000NTD 1,000
Name 14Platform 1410,000NTD 1,000
Name 15Platform 1510,000NTD 1,000
Name 16Platform 1610,000NTD 1,000
Name 17Platform 1710,000NTD 1,000
Name 18Platform 1810,000NTD 1,000
Name 19Platform 1910,000NTD 1,000

Scrollable#

Text Here

Fixed Column 1
Fixed Column 2
Scrollable Column 1
Scrollable Column 2
Scrollable Column 3
Scrollable Column 4
Scrollable Column 5
Scrollable Column 6
Fixed Column 3
Column 1Column 1Scrollable Column 1Scrollable Column 1Scrollable Column 1Scrollable Column 1Scrollable Column 1Scrollable Column 1Column 1
Column 2Column 2Scrollable Column 2Scrollable Column 2Scrollable Column 2Scrollable Column 2Scrollable Column 2Scrollable Column 2Column 2
Column 3Column 3Scrollable Column 3Scrollable Column 3Scrollable Column 3Scrollable Column 3Scrollable Column 3Scrollable Column 3Column 3
Column 4Column 4Scrollable Column 4Scrollable Column 4Scrollable Column 4Scrollable Column 4Scrollable Column 4Scrollable Column 4Column 4
Column 5Column 5Scrollable Column 5Scrollable Column 5Scrollable Column 5Scrollable Column 5Scrollable Column 5Scrollable Column 5Column 5
Column 6Column 6Scrollable Column 6Scrollable Column 6Scrollable Column 6Scrollable Column 6Scrollable Column 6Scrollable Column 6Column 6
Column 7Column 7Scrollable Column 7Scrollable Column 7Scrollable Column 7Scrollable Column 7Scrollable Column 7Scrollable Column 7Column 7
Column 8Column 8Scrollable Column 8Scrollable Column 8Scrollable Column 8Scrollable Column 8Scrollable Column 8Scrollable Column 8Column 8
Column 9Column 9Scrollable Column 9Scrollable Column 9Scrollable Column 9Scrollable Column 9Scrollable Column 9Scrollable Column 9Column 9

Header & Footer (Deprecated)#

This API will be deprecated in the future, please use Container wrap Table instead.

Text Here

NamePlatformPeopleAmmountAction
Name 1Platform 110,000NTD 1,000
Name 2Platform 210,000NTD 1,000
Name 3Platform 310,000NTD 1,000

API#

Table#

PropertyDescriptionTypeDefault
widthThe width of tablenumber | string100%
maxHeightThe maxHeight of table. Used to specify the height of the scroll area, could be string or number`numberstring`
textAlignThe textAlign of tablestringcenter

Table.HeadColumn#

PropertyDescriptionTypeDefault
fixedSet column to be fixed'left' | 'right'
widthThe width of tablenumber | string100%

Table.Row#

PropertyDescriptionTypeDefault
disableddisabled state of Rowbooleanfalse

Table.Column#

PropertyDescriptionTypeDefault
widthThe width of tablenumber | string100%
Edit this page