Natively Pronounced Mandarin

    javascript-data-set

    1.0.7 • Public • Published

    Data-set

    A powerfull dataset class

    Features:

    • load data from array, json or html markup
    • sort per multiple columns
    • complex filters (text, numerical and RegExp)
    • define your own filters
    • filter per multiple columns
    • pagination
    • framework agnostic (except for the html markup loader that uses jQuery)
    • Unit Tested

    data-set has 3 main components, the core, the filters and the data loaders. Filters and data loaders are optional and don't need to be included

    Getting Started

    1. npm install javascript-data-set or download the latest version

    2. include either dist/data-set-complete.min.js

    3. use it ...

    Example Usage

    Take a look at our jsfiddle page and play with it

    Data Loader

    The data loader is actually a factory that will return a properly configured and populated dataset

    Json

    The json loader can load data from a Json object or string. I will configure the dataset columns based on the object properties The Json should contain an array of objects

    var dataset, data;
    data = [ { col1: 1, col2: 2 }, { col1: 3, col2: 4 } ];
    dataset = new Francodacosta.DataSet.Loader.Json(JSON.stringify(data)).load();

    Array

    The json loader can load data from an array. Optionally you can specify if the first row contains column information The array array should contain one array per row,

    var d, data, firstRowHeaders;
    data = [['col1', 'col2'], [1, 2], [3, 4]];
    dataset = new Francodacosta.DataSet.Loader.Array(data, firstRowHeaders = true).load();
    // in this case the first row (['col1', 'col2']) will be discarded and used as column names

    Markup

    This will load data from an HTML table

        <table>
            <thead>
                <tr>
                    <!-- it data-name attribute is present, then it will be used for the column name -->
                    <th data-name="col1">Column 1</th>
                    <th>Col1</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>4</td>
                </tr>
            </tbody>
        </table>

    You can load data from this table in the following way

    // Please note that this loader requires jQuery
    dataset = new window.Francodacosta.DataSet.Loader.Markup('table').load();

    Sorting

    You can sort by any column and you can specify multiple columns

    // sort colum 1 ascending and then by column 2 descending
    dataset.setSorting('column 1');
    dataset.setSorting('column 2', 'DESC');
     
    // remove all sorting specifications
    dataset.clearSorting();
     
    data = dataset.getData()

    Filters

    A filter is just a function that accepts two arguments, the value and the searchTerm and returns true if a match is found

    The filter is executed for each row

    For your convenience a set of standard filters are included

    Text Filter

    window.Francodacosta.DataSet.Filter.Text.

    • match() returns true if there is an exact match
    • beginsWith() returns true if the value starts with searchTerm
    • endsWith() returns true if the value ends with searchTerm
    • contains returns true if the value contains searchTerm
    • regularExpression if you need more flexibility you can write your own regular expression
    Number Filter

    window.Francodacosta.DataSet.Filter.Number.

    • equal()
    • notEqual()
    • greaterThan()
    • greaterThanOrEqualTo()
    • lessThan()
    • lessThanOrEqualTo()

    You can add more than one filter, in this case an and search will be performed

    Install

    npm i javascript-data-set

    DownloadsWeekly Downloads

    1

    Version

    1.0.7

    License

    MIT

    Last publish

    Collaborators

    • francodacosta