Table Series

Provides some common styles of table.


01David LinBecause that’s all Steve Job’ needed for a salary.
02Tom McFarlinPictures are worth a thousand words, right? So Tom x 1,000.
03Chris AmesWith hair like that?! Enough said…


No.Name
Text 1Text 2Text 3
01David LinBecause that’s all Steve Job’ needed for a salary.
02Tom McFarlinPictures are worth a thousand words, right? So Tom x 1,000.
03Chris AmesWith hair like that?! Enough said…


No.NameEmail
01David Linaaa@gmail.com
02Tom McFarlinbbb@gmail.com
03Chris Amesccc@gmail.com
04Dr. Wolverine Longer Text Testddd@gmail.com
05Foristineee@gmail.com


No.NameEmail
01David Linaaa@gmail.com
02Tom McFarlinbbb@gmail.com
03Chris Amesccc@gmail.com
04Dr. Wolverine Longer Text Testddd@gmail.com
05Foristineee@gmail.com


No.NameEmail
01David Linaaa@gmail.com
02Tom McFarlinbbb@gmail.com
03Chris Amesccc@gmail.com
04Dr. Wolverine Longer Text Testddd@gmail.com
05Foristineee@gmail.com


No.NameEmail
01David Linaaa@gmail.com
02Tom McFarlinbbb@gmail.com
03Chris Amesccc@gmail.com
04Dr. Wolverine Longer Text Testddd@gmail.com
05Foristineee@gmail.com


No.NameEmailPhone
01David Linaaa@gmail.com767 929 1212
02Tom McFarlinbbb@gmail.com188 928 9999
03Chris Amesccc@gmail.com188 928 2324
A table cell that spans 1 columnsA table cell that spans 3 columns
A table cell that spans 4 columns


Jan14131123092322
Feb14131123092322
Mar14131123092322
Apr14131123092322
May14131123092322
Jun14131123092322

Responsive Table


No.NameEmail
01David Linaaa@gmail.com
02Tom McFarlinbbb@gmail.com
03Chris Amesccc@gmail.com
04Dr. Wolverine Longer Text Testddd@gmail.com
05Foristineee@gmail.com


Responsive Table with Scroll Bars

The scroll bar is displayed when the response is triggered.


No.NameEmail
01David Linaaa@gmail.com
02Tom McFarlinbbb@gmail.com
03Chris Amesccc@gmail.com
04Dr. Wolverine Longer Text Testddd@gmail.com
05Foristineee@gmail.com


API


Table

import Table from '@uixkit.react/components/Table/index.tsx';
PropertyTypeDefaultDescription
dataJSON Object Literals-Specify data of Table as a JSON string format. Such as:
usage 1:
{"fields":[[{"cols": 1, "content": "01" },{"cols": 1, "content": "David Lin" }],[{"cols": 1, "content": "02" },{"cols": 1, "content": "Tom McFarlin" }]]}
usage 2:
{"headers": ["No.","Name"],"fields":[[{"cols": 1, "content": "01" },{"cols": 1, "content": "David Lin" }],[{"cols": 1, "content": "02" },{"cols": 1, "content": "Tom McFarlin" }]]}
usage 3:
{"fields":[[{"cols": 1, "content": "01" },{"cols": 1, "content": "David Lin" }],[{"cols": 1, "content": "02" },{"cols": 1, "content": "Tom McFarlin" }],[{"cols": 4, "content": <><strong style={{background:"yellow"}}>A table cell that spans <span style={{color:"red"}}>4</span> columns</strong></> }]]}
borderedbooleanfalseAdds borders on all sides of the table and cells
noborderbooleanfalseRemoves all borders on the table and cells, including table header
horizontalbooleanfalseUse the horizontal split effect for each row. Includes a header cell(<th> tag) with this attribute.
alternantRowbooleanfalseApply alternating row color in dynamically created table
alternantColbooleanfalseApply alternating column color in dynamically created table
perLinebooleanfalseOnly use the horizontal splitting effect for each row.
responsivebooleanfalseCreate responsive tables up to a particular breakpoint.
responsiveWithScrollBarbooleanfalseCreate responsive tables up to a particular breakpoint. This property allows scroll bars to be created automatically in the table.
Only one of the responsive and responsiveWithScrollBar properties is allowed, and both are invalid if set to true.

JSON configuration properties of the data:

PropertyTypeDefaultDescription
fieldsarray-Table rows and columns. The key cols identifies the column (change the value if the column is merged). The key content to place the content of each cell. Eg. [[{"cols": 1, "content": "01" },{"cols": 1, "content": "David Lin" }],[{"cols": 1, "content": "02" },{"cols": 1, "content": "Tom McFarlin" }]]
headersarray-Defines a header cell in an HTML table. Eg. ["No.","Name"]