/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