kimia-fdx-table

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

FdxTable(string id, object options)

• ID: Is the container id where the table will be rendered.
• options: This object contains necessary data and parameters to render the table.

Installation

Install component in my-project with npm

  cd my-project
  npm i kimia-fdx-table

Support

For support, email [e-mail].

Authors

• © 2023 Kimia Group. All rights reserved.
• Developer @HishamHuneidie