Developed by Antea Group
You need to use nvm to change your node version if required.
nvm use # used to change node version with .nvmrc present in the root directoryLyxea custom typescript library for integrated datatable.
Automation the datatable content and visualisation from a custom configuration object.
Run
npm installThis project use datatable.net and their extensions.
For more information, please visit https://datatables.net/, or for a more precise documentation, use ChatGPT.
You can find many example in this repo, that can serve aswell as playground to test some configuration.
Go on /example to find them.
To run it, go on the wanted example directory, and run npm run dev.
Then, go on http://localhost:5173/
You can provide Datatable native configuration in the main object. It works properly.
If you want more info about the base configuration, please refer to the official documentation.
If you want to add the specific Lyxea custom object, you need to add the key lxConfig. Then you can add your own custom configuration depend on your needs.
The following sections are dedicated to this configuration.
| Name | Description | Default |
|---|---|---|
| url | url to provide to get data | - |
| headers | headers and cols definition | - |
| filters | False | true |
| handleBootrapTabChange | Handle the issue with bootstrap where the click on tab nav broke the datatable headers | true |
| scrollYFitToScreen | Set the scrollY to automatically fit the screen | false |
| row_action | Provide action you can define and add a column at the end of the DataTable | - |
| columnsDefaultKey | Provide a default key for each column. Overriden by the key defaultValue in columns definition |
- |
On a standard usage, you must specify the columns definition in the columns or columnsDef key of the stadard config object.
On this override, you can declare it on the Lyxea config object, as follow :
new LyxeaDatatable({
lxConfig: {
headers: [
{
columns: [
{
data: 'first_name',
name: 'first_name',
title: 'Prénom',
className: 'ma-super-classe',
},
],
},
{
headerGroup: 'Mon super groupe de header',
columns: [
{ data: 'last_name', name: 'last_name', title: 'Nom' },
{ data: 'start_date', name: 'start_date', title: 'Date' },
],
},
],
},
});The headerGroup will return the correct colspan size depend on the number of key with this key-value pair in the config object.
You can provide more key depend on the use case you want. In the future, more keys can be added in this project.
If you want to modify the data exposed in the datatable, you must add a transforer.
In this function, you need to return all the data.
You can add it to implement the dedicated function :
const table = new LyxeaDatatable({
/*config*/
});
table.tranformer.add((data) =>
data.map((d) => {
d.first_name = d.first_name.toUpperCase();
return d; // return of the data needed ! function .map did it natively
})
);This transformer will be execute just before datatable initialisation.
If you want to add an action on each row of the datatable, we need to implement the action module.
To do it, simply add the key actions on the LyxaDatatable specific config object.
| name | description | example | | ------------------ | ------------------------------------------------------------------------------------------ | ---------------------------------------------------- | --- | --- | | DATETO_FORMAT | parse date to defined format | {render: 'DATE_TO_FORMAT_YYYY'} => '2024' | | DATE | parse date to predefined date format | '23/04/2024 12:23' | | DATE_DAY | parse date with year, month and day only | '23/04/2024' | | DATE_WITH_SECOND | parse date to predefined date format | '23/04/2024 12:23:34' | | LOCAL_NUMBER | parse number to string with correct format | 1300 => '1 300' | | BOOLEAN_YESNO | return a string 'Yes' / 'No' depend on the bool value | true => "Yes" or false => "No" | | NUMBER_FIXED_2 | fix the number value to two digit | 1.3443 => 1.34, 1 => 1.00 | | NUMBER_2_DIGIT_MAX | fix the number value to two digit max | 1.3443 => 1.34, 1 => 1 | | CUT_LONG_TEXT | In case of a long text, prevent the overflow by cutting the text and replace it with '...' | "a very long text" => "a very ..." | | PARSE_INT | parse a string to integer | "3" => 3 | | CHECKBOX | add a checkbox at the first columns of the table | | | UPPERCASE | convert a string to uppercase | "this must be uppercase" => "THIS MUST BE UPPERCASE" | | |
Source file are avalaible at /lib
- core : main classes of LyxeaDatable
- Dao : Data acquisition object - specific to data acquisition (fetching)
- Dto : Data transformation object - specifiq to data manipulation
- dom : Classes specfic to DOM manipulation or DOM Element generation
- plugins : You can retrieve there all extension develop on top of LyxeaDatatable
A state is a dynamic property you can set by adding a State object.
Instanciate it with your initial value.
const state = new State({ count: 0 });In a more complexe example :
type MyObjectState<T> = {
// define the type of the state you want
loading: boolean;
data: Array<T> | null;
error: Error | null;
};
class MyObject<T> {
state: State<MyObjectState<T>>;
constructor() {
this.state = new State<MyObjectState<T>>({
// set the initial value
loading: false,
error: null,
data: null,
});
}
}Then, you can retrive the state of the object with the method getState
const initialState = { count: 0 };
const state = new State(initialState);
state.getState(); // { count: 0 }To subscribe to a state, simply call the function subscribe exposed by the state of the object.
It is like an event listener on the state, and the procedure you define in the callback will be call on each change of the state.
// in this example, dao object have a state.
// on each setState, the function define in the subsribe method is called
const table = new LyxeaDatatable({
/* config */
});
table.dao.state.subscribe((state) => {
console.log('my state have change !');
const myLoader = document.getElementById('mon-super-loader');
if (state.loading) myLoader.style.display = 'block';
else myLoader.style.display = 'none';
});
table.dao.state.setState(() => ({ loading: true })); // update the state and call the subscribe
// console : my state have change !