NS-Lib

Table

NS-Lib provides a JavaScript wrapper for Bootstrap tables, which makes it very easy to manage features such as page navigation, sorting, filtering, and a lot more. The table is one of the premier features in NS-lib and is highly customizable.

Basic tables

Creating a table is really easy in NS-Lib. All you need to do is create a table div and run a few lines of code to turn the empty div into a full table.

<div id="users-table"></div>

var userTable = new Table(
    document.getElementById("users-table"),
    [
        { "name": "First Name" },
        { "name": "Last Name" },
        { "name": "Email Address" },
        { "name": "Phone Number" }
    ]
);

userTable.AddRows([
    ["Ruby", "Gump", "[email protected]", "(555) 532-5138"],
    ["Anna", "Landrum", "[email protected]", "(555) 549-0696"],
    ["Terry", "Ball", "[email protected]", "(555) 577-5412"],
    ["Jerry", "Duckworth", "[email protected]", "(555) 595-9589"],
    ["Alex", "Breitenbe", "[email protected]", "(555) 576-6604"],
    ["John", "Wilke", "[email protected]", "(555) 368-0084"],
    ["Mary", "Carroll", "[email protected]", "(555) 549-5583"],
    ["Mark", "Wilkinson", "[email protected]", "(555) 674-1183"]
]);

Here's the result:

If all you need is a simple table with page navigation, this should have you covered. There are many more options and customizations available, so continue to the next section if you are interested.

Clearing rows

You can remove all of the rows from a table with the Table.Clear() function. Try it out below:

<button type="button" class="btn btn-danger" onclick="userTable.Clear();">Clear Table</button>

Sorting

If desired, you can enable sorting for one or more columns.

var userTable = new Table(
    document.getElementById("users-table"),
    [
        { "name": "First Name", "sortable": true },
        { "name": "Last Name", "sortable": true },
        { "name": "Email Address" },
        { "name": "Phone Number" }
    ]
);

Searching

A search box can be added to the table

var userTable = new Table(
    document.getElementById("users-table"),
    [
        { "name": "First Name", "searchable": true },
        { "name": "Last Name", "searchable": true },
        { "name": "Email Address", "searchable": true },
        { "name": "Phone Number", "searchable": true }
    ],
    {
      "title": "Users",
      "search": true
    }
);

Hiding columns

You can enable the column hider, which allows users to select which columns they would like to see

var userTable = new Table(
    document.getElementById("users-table"),
    [
        { "name": "First Name" },
        { "name": "Last Name" },
        { "name": "Email Address" },
        { "name": "Phone Number" }
    ],
    {
        "allowHidingColumns": true
    }
);

Columns can be hidden by default by adding "shown": false to the column's configuration.

You can force a column to be shown by adding "forceShown": true to the column's configuration. This will gray out its checkbox and prevent the user from hiding it.

Pages