Table SorterDocs on GitHub

Table Sorter

Users can filter and limit the data displayed within a long data table.


IndexMoneyNameNo.Date1Date2
1$55.134David Lin34534342012-09-25T12:10:46+00:00May 22, 2003
2$255.12Co Cheey-2324.3432013-09-10T12:10:46+00:00September 13, 2013
3$21.134Foristin-34789.342018-09-24T12:10:46+00:00January 2, 2019
4$3454.134Alice+224.52011-09-21T12:10:46+00:00December 1, 2018
5$224.0Wooli+33.62011-02-26T12:10:46+00:00July 22, 2017
6$356.2Spiter Low278.234872019-01-01T12:10:46+00:00July 28, 2017

API


Table Sorter

import TableSorter from '@uixkit.react/components/TableSorter/index.tsx';
PropertyTypeDefaultDescription
dataJSON Object Literals-Specify data of Table as a JSON string format. Such as:
usage:
{"headers": [{"type": false, "content": "Index" },{"type": "number", "content": "Money" },{"type": "text", "content": "Name" },{"type": "number", "content": "No." },{"type": "date", "content": "Date1" },{"type": "date", "content": "Date2" }],"fields":[[{"cols":1,"content":"1"},{"cols":1,"content":"$55.134"},{"cols":1,"content":"David Lin"},{"cols":1,"content":"3453434"},{"cols":1,"content":"2012-09-25T12:10:46+00:00"},{"cols":1,"content":"May 22, 2003"}],[{"cols":1,"content":"2"},{"cols":1,"content":"$255.12"},{"cols":1,"content":"Co Cheey"},{"cols":1,"content":"-2324.343"},{"cols":1,"content":"2013-09-10T12:10:46+00:00"},{"cols":1,"content":"September 13, 2013"}]]}
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":"1"},{"cols":1,"content":"$55.134"},{"cols":1,"content":"David Lin"},{"cols":1,"content":"3453434"},{"cols":1,"content":"2012-09-25T12:10:46+00:00"},{"cols":1,"content":"May 22, 2003"}],[{"cols":1,"content":"2"},{"cols":1,"content":"$255.12"},{"cols":1,"content":"Co Cheey"},{"cols":1,"content":"-2324.343"},{"cols":1,"content":"2013-09-10T12:10:46+00:00"},{"cols":1,"content":"September 13, 2013"}]]
headersarray-Defines a header cell in an HTML table. The key type is used to specify the type of sorting for each column (Type of sorted values: false, 'number', 'text' or 'date'). The key content is the value of each field. Eg. [{"type": false, "content": "Index" },{"type": "number", "content": "Money" },{"type": "text", "content": "Name" },{"type": "number", "content": "No." },{"type": "date", "content": "Date1" },{"type": "date", "content": "Date2" }]