npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@ftchinese/ftc-table

v1.5.2

Published

The The table component being used by FTC. Edit

Downloads

16

Readme

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 theadtbodytfootcaptain...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.