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: For th in thead, value can be "numeric". If one table column has the attribuite data-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: For th in thead, value should be "none","descending","ascending". It decides the sort order of this column when first clicking the sorting flag.

• data-ftc-table--disablesort: For th in thead, no value. As every column of our table are default to be sortable, if you add this attribute to one column 's th, this column cannot be sorted.

Responsive related:

• data-ftc-table--responsive:For table, value should be flat. To make the table flat responsive.

Wrapped related

• data-ftc-table--wrapped:For table,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 and data-ftc-table--wrapper-height to specify the size of the container, whose value can be 100%/200px ...

Statistic related

• data-ftc-table--statistic:For table,no value. To add statistic info rows to the table, such as sum,mean,median.

The Classes

Table basic classes:

• ftc-table:Required.For table . The basic styles to table.

Table responsive classes

• ftc-table--responsive-flat:For table. Add flat responsive related styles to table.

• ftc-table--responsive-overflow:For table. Add overflow responsive related styles to table.

• ftc-table--responsive-scroll:For table. Add scroll responsive related styles to table.

Table row stripe class:

• ftc-table--row-stripes:For table. Add row stripe related styles to table, making the adjacent 2 rows with 2 colors.

Table lines classes:

• ftc-table--horizontal-lines:For table. Add horizontal lines to table.

• ftc-table--vertical-lines:For table. 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: For td in tbody.The styles for numeric data cell.

• ftc-table__cell--content-secondary: For span in th in thead . The styles for subtitle for each column.

Captain classes:

• ftc-table__caption--top: For captain in table.The style for top captain.

• ftc-table__caption--bottom: For captain in table.The style for bottom captain.