Kimia-fdx-table NPM

FDX-Table

This is a JS component created as a solution to solve the needs of the FDX company about statistics.

Getting started

Javascript

// Previous import with webpack
import 'kimia-fdx-table/app/styles/fdx-table-main.css';
import FdxTable from 'kimia-fdx-table';

// 1: Set options
let options = {
    ajaxURL: "/url-get-updated-data-ajax", // URL used to get updated data by ajax
    ajaxExportURL: '/url-get-data-to-export-ajax', // URL used to get exported data by ajax
    buttons: ["csv"],
    data: {
        info: {
            sortBy: (string),
            sortOrder: (string),
            pageSize: (int),
            pageNumber: (int),
        },
        list: [
            // Registros a listar
            {aggregation_column: (string), column_1: (int | string), column_2: (int | string)}
        ],
        params: {
            aggregation: "aggregation_key",
            filters: {column_key: "string value"},
            limit: (int),
            page: (int),
            searchColumn: "column_key",
            searchText: "string value",
            sortBy: "column_key",
            sortOrder: "ASC|DESC",
        },
        totals: {aggregation_column: "Empty string", column_1: (int | string), column_2: (int | string)},
    },
    columnDefs: {
        columns: [
            {"type": "group", "name": "Group"}, // Column used by your aggregation
            {"type": "column_key", "name": "Column shown string", prefix: "$|%"}
        ],
        tooltips: [
            {"type": "column_key", "text": "Column description"},
        ],
        bigColumns: [],
        smallColumns: [],
        enableSorting: ["column_key_1", "column_key_2", "column_key_3"],
        availableAggregations: [
            {"type": "column_key", "name": "Column shown string"}
        ]
    },
};

// 2: Declare table
let table = new FdxTable("#table-container-id", options);

// 3: Build
table.build();

HTML

<div id="#table-container-id"></div>

Option's description

Parameter	Type	Description
`ajaxURL`	`string`	Required. URL used to get updated data by ajax
`ajaxExportURL`	`string`	Required. URL used to get exported data by ajax
`buttons`	`array`	Buttons array
`data.info`	`json`	Required. Parameters used to create pagination and info label
`data.list`	`array`	Required. Rows to be rendered
`data.params`	`json`	Required. Params sent to the endpoint wich returns the data
`data.totals`	`json`	Column totals
`columnDefs.columns`	`json[]`	Required. Each element into the array is a json with the column data
`columnDefs.tootips`	`json[]`	Each element into the array has a column description
`columnDefs.bigColumns`	`array`	Column keys that will be bigger than other
`columnDefs.smallColumns`	`array`	Column keys that will be smaller than other
`columnDefs.enableSorting`	`array`	Column keys that will be enabled to sort table
`columnDefs.availableAggregations`	`json[]`	Enabled aggregations