ftc-table
The table component used by FTC.
Install
cd yourProject
npm install "@ftchinese/ftc-table" --save
API
API for JS
If the html for ftc-table is ready, you can use JS API this way:
import Table from '@ftchinese/ftc-table';
//Construct all the table elements with property data-ftc-component="ftc-table" in your document:
Table.init();
//Or, if you want to construct one specified table:
new Table(document.getElementById(yourTableId));//The praram of new Table() can be the element of your table.
new Table('#yourTableId');//The param of new Table() can also be a string of query selector of your table, such as '#yourTableId','.yourTableClass'.
It will add some features to your table, depending on what properties your table have. The more details will be explained below.
API for SASS
You can choose to use the silent mode or not.
If you choose the silent mode, you should set the $ftc-table-is-silent to false and import the ftc-table module. Then your table could get all the styles defined by ftc-table.
$ftc-table-is-silent:false;
@import "../node_modules/@ftchinese/ftc-table/main";//The relative path of "@ftchinese/ftc-table" + "@ftchinese/ftc-table/main". What the relative path is depends on where you import it.
If you do not choose the silent mode, you should first set the $ftc-table-is-silent to true and import the ftc-table module, and what's more, you should manually @include the style mixin defined by ftc-table:
$ftc-table-is-silent:true;
@import "ftc-table/main";
// You can get all the default CSS classes.
@include ftcTableAll; Get the CSS classes starting with ".ftc-table"
Adding different CSS classes to your table will bring different style.The more details will be explained below.
Prepare your html
Before using our APIs, you may first prepare the html code.
The root element
It should be a table
with the basic attribute data-ftc-component="ftc-table"
and the base classname "ftc-table"
(or your own class prefix like "my-table"
):
<table class="ftc-table" data-ftc-component="ftc-table" data-ftc-table--no-js>
</table>
As you see, it should with the other attribute data-ftc-table--no-js
if you want to use JS API.
The children elements:
The root table
can have all the table elements such as thead
、tbody
、tfoot
、captain
...Here is a simple example:
<table class="ftc-table ftc-table--vertical-lines" data-ftc-component="ftc-table" data-ftc-table--no-js>
<thead>
<tr>
<th aria-sort=none data-ftc-table--datatype=>
Cheese
<span class="ftc-table__cell--content-secondary">
Type of cheese
</span>
</th>
<th aria-sort=none data-ftc-table--datatype=>
Bread
<span class="ftc-table__cell--content-secondary">
Type of bread
</span>
</th>
<th aria-sort=none data-ftc-table--datatype=numeric>
Cost
<span class="ftc-table__cell--content-secondary">
(GBP)
</span>
</th>
<th aria-sort=none data-ftc-table--datatype=numeric>
Cost
<span class="ftc-table__cell--content-secondary">
(EUR)
</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td >
cheddar
</td>
<td >
rye
</td>
<td class=ftc-table__cell--numeric>
1
</td>
<td class=ftc-table__cell--numeric>
1.56
</td>
</tr>
<tr>
<td>
stilton
</td>
<td>
wholemeal
</td>
<td class=ftc-table__cell--numeric>
2
</td>
<td class=ftc-table__cell--numeric>
1.85
</td>
</tr>
<tr>
<td>
red leicester
</td>
<td class>
white
</td>
<td class=ftc-table__cell--numeric>
3
</td>
<td class=ftc-table__cell--numeric>
</td>
</tr>
</tbody>
</table>
HTML Demos
You can go to here to get more html demos. And if you like to get html by data and templates, you can go to here to see Nunjucks templates and here to see the json data for Nunjucks templates.
We provide all kinds of tables at these demos: captionsTable, responsiveFlatTable, responsiveScrollTable, statisticTable ...
The Attributes
You can add different attributes to table
to get table with different features:
Sort related:
-
data-ftc-table--datatype
: Forth
inthead
, value can be "numeric". If one table column has the attribuitedata-ftc-table--datatype="numeric"
, the data of this column will be considered as number type when sorting the table content depending on this column. -
aria-sort
: Forth
inthead
, value should be "none","descending","ascending". It decides the sort order of this column when first clicking the sorting flag. -
data-ftc-table--disablesort
: Forth
inthead
, no value. As every column of our table are default to be sortable, if you add this attribute to one column 'sth
, this column cannot be sorted.
Responsive related:
-
data-ftc-table--responsive
:Fortable
, value should be flat. To make the table flat responsive.
Wrapped related
-
data-ftc-table--wrapped
:Fortable,no value. To make the table wrapped by another container, and to fix the table head when scrolling the table. In this case, you can also add attributes
data-ftc-table--wrapper-width
anddata-ftc-table--wrapper-height
to specify the size of the container, whose value can be 100%/200px ...
Statistic related
-
data-ftc-table--statistic
:Fortable
,no value. To add statistic info rows to the table, such as sum,mean,median.
The Classes
Table basic classes:
-
ftc-table
:Required.Fortable
. The basic styles to table.
Table responsive classes
-
ftc-table--responsive-flat
:Fortable
. Add flat responsive related styles to table. -
ftc-table--responsive-overflow
:Fortable
. Add overflow responsive related styles to table. -
ftc-table--responsive-scroll
:Fortable
. Add scroll responsive related styles to table.
Table row stripe class:
-
ftc-table--row-stripes
:Fortable
. Add row stripe related styles to table, making the adjacent 2 rows with 2 colors.
Table lines classes:
-
ftc-table--horizontal-lines
:Fortable
. Add horizontal lines to table. -
ftc-table--vertical-lines
:Fortable
. Add vertical lines to table.
Wrapping node class:
-
ftc-table__wrapper
: For the parentNode of thetable
.The class for the container div wrapping the table.
Cell classes:
-
ftc-table__cell--numeric
: Fortd
intbody
.The styles for numeric data cell. -
ftc-table__cell--content-secondary
: Forspan
inth
inthead
. The styles for subtitle for each column.
Captain classes:
-
ftc-table__caption--top
: Forcaptain
intable
.The style for top captain. -
ftc-table__caption--bottom
: Forcaptain
intable
.The style for bottom captain.