Naked-Table

Naked-Table is a JavaScript library that provides the basic functionality for dynamically creating tables on a web if you supply it with an array of data. It's called Naked-Table because it is not concerned with any styling and or page interaction other than what it provides. All of this is left to be added by you so that it fits into your page and how you want it to work.

Features

1. Automatic creation of HTML table from data
2. Zero dependency. This is vanilla JavaScript, no other library is needed to make this work
3. Really small. Minified version is 5Kb, GZip'd this comes down to only 1.5Kb
4. Lazy loading makes it suitable for large amounts of data as it only rendered data that is visible to the user
5. Column ordering is automatically added
6. Allows searching of data
7. Custom column ordering icons to fit your site style

Browser comaptibility

Naked-table is compatible with modern web browsers and should work in Chrome, Edge, FireFox and Safari. Sorry, but it won't work in any version of IE.

Installation

The library is designed for use in a browser, and so you can simply drop in a standard script tag:

    <script src="naked-table.min.js"></script>

Basic Usage

Setting up a naked table is super simple, and requires a just three steps. The first step in using the table is to define a placeholder Html element on your page with any unique id that you want, e.g:

    <div id="tableTest"></div>

The next step is simply create a new naked-table object. The constructor takes in three arguments:

1. data: An array of JavasSript objects that you want to display
2. element id: The Id of the html element you want the table to render into
3. options: A JavaScript object that contains options that affect how the table operates

    let data = [{id: 1}, {id: 2}, {id: 3}];

    let options = { fields: ['id'], numbers: ['id'] }

    let nTable = new NakedTable(data, 'tableTest', options);

The final step is to apply an ordering to the table:

    nTable.order("id");

Options

The options object that you supply can have the following properties:

1. fields: An array of fieldnames that you want to use to for the columns in the table. The order of these define the order of the columns displayed in the table (required)
2. numbers: An array of fieldnames that are to be treated as numbers when the table is ordering data. If a field is not defined in here then it is assumed to be a string (optional)
3. showByDefault: A boolean that denotes if the table should show rows of data as soon as it is created. If you exclude this it defaults to true (optional)
4. trimObjects: A boolean that denotes if the objects in the data array have properties that are not defined in the fields property trimmed from the object. Doing so decreases memoy usage and increases search performance. If you exclude this it defaults to true (optional)
5. indicatorAsc: A string containing the html to use for the ascending indicator. This can be any valid HTML. If not included a default indicator is used. It must also be used in conjunction with 'indicatorDec' (optional)
6. indicatorDec: A string containing the html to use for the descending indicator. This can be any valid HTML. If not included a default indicator is used. It must also be used in conjunction with 'indicatorAsc' (optional)

Ordering

While the ability to click on the table header and sort by that column is included by default you can also invoke column ordering via JavaScript by calling the order() function on the table object. This method takes the following parameters:

1. fieldName: The field name by which to order by (required)
2. isAscending: A boolean denoting whether the order is ascending (true) or descending (false) (optional)

If you exclude 'isAscending' and the table is already ordered by the field specified then the order is reversed, while if you exclude the ordering and define a new field to order by then an ascending ordering is assumed

Searching

Table data can be easily searched with only matching rows displayed. This is done by calling the search() method, which takes a single parameter:

1. searchTerm: A string containing the search term to look for. If the string is empty then the serch is reset and all the rows are displayed (required)

There are no assumptions made about how the search should be presented to the user on the screen or how the user should interact with the search, therefore no UI elements are provided for searching and these must be provided by the page itself, for example:

    <input type="text" id="searchinput"><button onclick="performSearch()">Search</button>

    function performSearch() {
        nTable.search(document.getElementById('searchinput').value);
    }

This means that the page and not the table is in control of all of the styling and interaction with the search.

Applying Styles

As with the search there are no assumptions made about the styling of the table, no inline styles are added to the table and no CSS classes are added either. However this does not mean that the table cannot be styled, you simply need to hang the styles off the 'id' that you used to define the table with. For example to make the table full width you can use:

    #tableTest {
        width: 100%;
    }

    #tableTest > table {
        width: 100%;
    }

Or to add striped rows you can use:

    #tableTest > table > tbody tr:nth-child(odd) {
        background: #ffffff;
    }

    #tableTest > table > tbody tr:nth-child(even) {
        background: #f4f4f4;
    }