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 [email protected].

Authors

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