Full-featured Dynamic Data Grid In Vanilla JavaScript – jsdatatable

Preview:

Description:

jsdatatable is a simple JavaScript plugin to dynamically render a data table from any data defined in the JavaScript or JSON.

With support for sorting, pagination, live search, cell editing and much more.

How to use it:

To get started, include the jsdatatable’s JavaScript and Stylesheet on the page.

<link rel="stylesheet" href="./src/simple-table.css" />
<script src="./src/simple-table.js"></script>

Create an empty table on the page.

<table id="table">
  <thead style="cursor: pointer"></thead>
  <tbody></tbody>
</table>

Create a search field that allows the user to filter through table rows by keywords.

<input type="text" id="table-search" placeholder="Search" />

Create pagination controls at the bottom of the table.

<button class="btn" id="table-last-page" disabled>Last Page</button>
<button class="btn" id="table-next-page" disabled>Next Page</button>

Prepare your data in the JavaScript as follows:

• order: ‘asc’ or ‘desc’
• searchEnabled: enable/disable live search
• sortEnabled: enable/disable sorting
• type: data type for sorting
• editEnabled: enable/disable cell editing

const myData = {
      header: [
          { name: 'Name', order: 'asc', searchEnabled: true, sortEnabled: true, defaultSort: true, editEnabled: true },
          { name: 'Gender', order: 'desc', sortEnabled: true },
          { name: 'Age', order: 'asc', sortEnabled: true, type: 'number' },
          { name: 'Balance', order: 'desc', sortEnabled: true, type: 'number' },
          { name: 'Company', order: 'asc', sortEnabled: true, searchEnabled: true },
          { name: 'Email', order: 'asc', sortEnabled: true, searchEnabled: true },
          { name: 'Phone', order: 'asc', sortEnabled: true, searchEnabled: true },
          { name: 'Address', searchEnabled: true, editEnabled: true },
      ],
      body: [
          {
              "name": "Payne Cherry",
              "gender": "male",
              "age": 32,
              "balance": 1224.4,
              "company": "AUTOGRATE",
              "email": "[email protected]",
              "phone": "+1 (833) 562-3812",
              "address": "432 Scholes Street, Elliott, Colorado, 4318"
          },
          {
              "name": "Christensen Cash",
              "gender": "male",
              "age": 20,
              "balance": 2878.02,
              "company": "EXPOSA",
              "email": "[email protected]",
              "phone": "+1 (801) 436-2415",
              "address": "714 Commercial Street, Welda, Oklahoma, 8326"
          },
          {
              "name": "Sonja Lane",
              "gender": "female",
              "age": 23,
              "balance": 2942.29,
              "company": "EXPOSA",
              "email": "[email protected]",
              "phone": "+1 (878) 506-2992",
              "address": "770 Kiely Place, Dunbar, Missouri, 1515"
          },
          {
              "name": "Jocelyn Jimenez",
              "gender": "female",
              "age": 32,
              "balance": 3195.3,
              "company": "EXPOSA",
              "email": "[email protected]",
              "phone": "+1 (946) 473-2907",
              "address": "236 Whitwell Place, Retsof, Kansas, 8149"
          },
          {
              "name": "Lakeisha Small",
              "gender": "female",
              "age": 38,
              "balance": 2887.29,
              "company": "COMTOUR",
              "email": "[email protected]",
              "phone": "+1 (857) 586-3981",
              "address": "340 Luquer Street, Juarez, California, 2182"
          },
          {
              "name": "Joanne Norman",
              "gender": "female",
              "age": 23,
              "balance": 2046.37,
              "company": "COMTOUR",
              "email": "[email protected]",
              "phone": "+1 (918) 600-3719",
              "address": "392 Pershing Loop, Newry, Kentucky, 5587"
          },
          {
              "name": "Byrd Mckay",
              "gender": "male",
              "age": 23,
              "balance": 3003.52,
              "company": "AUTOGRATE",
              "email": "[email protected]",
              "phone": "+1 (945) 526-3716",
              "address": "959 Lombardy Street, Efland, Louisiana, 8518"
          },
          {
              "name": "Winifred Ward",
              "gender": "female",
              "age": 20,
              "balance": 3745.72,
              "company": "AUTOGRATE",
              "email": "[email protected]",
              "phone": "+1 (907) 496-3293",
              "address": "718 Fillmore Place, Hamilton, Virginia, 8561"
          },
      ]
}

Override the optional settings as per your needs.

const myOptions = {
      itemsPerPage: 5, 
      currentPage: 0, 
      removeButton: true
}

Render a data table on the page.

const table = document.querySelector('#table');
Table.init(table, myData, myOptions);