This is a JS component created as a solution to solve the needs of the FDX company about statistics.
// 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();
<div id="#table-container-id"></div>
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 |
- ID: Is the container id where the table will be rendered.
- options: This object contains necessary data and parameters to render the table.
Install component in my-project with npm
cd my-project
npm i kimia-fdx-table
For support, email fake@fake.com.
- © 2023 Kimia Group. All rights reserved.
- Developer @HishamHuneidie