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