/data2table

An easy way to display data on web. ShowPage:

Primary LanguageJavaScriptMIT LicenseMIT

data2table

An easy way to display data on web.

Demo page 1: https://mingzhangyang.github.io/data2table/test/datatable.test.1.html

Demo page 2: https://mingzhangyang.github.io/data2table/test/datatable.test.2.html

Demo page 3: https://mingzhangyang.github.io/data2table/test/datatable.test.3.html

Get

  1. using npm ? Try the command below.

    npm i data2table

  2. Or visit GitHub to download the source code

    git clone git@github.com:mingzhangyang/data2table.git

For development

  1. npm install --global gulp-cli

  2. npm install

  3. gulp build

Usage

  1. import data2table.bundle.js and data2table.bundle.css into your HTML file

    <link rel="stylesheet" href="path/to/dataTable.bundle.css">
    <script src="path/to/dataTable.bundle.js"></script>
    
  2. Put <table id="your-name-it></table>into the place where you want to show the table

  3. Prepare your data as JSON array, i.e.

       let exampleData = [
         {
           "Aff_id": "10377550",
           "Gene_accession": "NM_001127233",
           "Gene_symbol": "Trp53",
           "Gene_title": "transformation related protein 53"
         },
         {
           "Aff_id": "10374366",
           "Gene_accession": "NM_007912",
           "Gene_symbol": "Egfr",
           "Gene_title": "epidermal growth factor receptor"
         },
         {
           "Aff_id": "10375038",
           "Gene_accession": "NM_010822",
           "Gene_symbol": "Mpg",
           "Gene_title": "N-methylpurine-DNA glycosylase"
         },
         ...
       ];
  4. Configure the table.

    let dt = new DataTable(exampleData, 'you-name-it');
    dt.addFilter('Gene_symbol', 'value');
    dt.configureColumn('Aff_id', {
       label: 'uid',
       tips: 'unique identifier',
       sortable: true,
       width: '100px',
       align: 'center',
       formatter: 'highlight'
    });
    dt.configureColumn('Gene_symbol', {
       label: 'Gene Symbol',
       width: '100px',
       align: 'center'
    });
    dt.configureColumn('Gene_accession', {
       label: 'Accession',
       width: '120px',
       align: 'center',
    });
    dt.generate();

Please find the demo page here.

Advanced

create customized formatter

change the layout

customize the style