gridansjs

v3.1.3

Published

14 days ago

For English scroll below...

Downloads

255

0High
0Medium
0Low

andsoft80

Gridans - компонент для отображения табличных данных корпоративного уровня на чистом JavaScript без зависимостей.

For English scroll below...

Быстрый старт

Установка через npm

npm i gridansjs

Подключение к проекту

import Gridans from 'gridansjs';
import '../node_modules/gridansjs/Gridans.css';

Определение конфигурации

let configDoc = {
            cols: [
                { name: 'id', caption: 'ID', type: 'String', width: 100 },//mandatory column
                { name: 'status', caption: 'STATUS', type: 'Lineawesomefont', width: 10 },
                { name: 'name', caption: 'DOCUMENT NAME', type: 'String', width: 200 },
                { name: 'url', caption: 'URL', type: 'Url', width: 100 },
                { name: 'date', caption: 'DOCUMENT DATE', type: 'Date', width: 100 },
                { name: 'counterparty', caption: 'COUNTERPARTY', type: 'String', width: 100, edt: true },//with extend data type
                { name: 'currency', caption: 'CURRENCY', type: 'String', width: 100, edt: true },
                { name: 'amount', caption: 'AMOUNT', type: 'Numeric', width: 100 },
            ],
            options: {
                checkboxes: false,
                simpleMode: false,//sort by table's level
                columnResizable: true,
                columnReorderable: true,
                columnSortable: true,
                sortSettings: [{
                    columnName: 'counterparty', //default sorting column name with sipmleSorting flag
                    isAsc: true
                }],
                columnHighlights: [
                    { columnName: 'status', colorClass: 'highlight-yellow' },
                    { columnName: 'counterparty', colorClass: 'highlight-red' },
                    // { columnName: 'email', colorClass: 'highlight-green' }
                ],
                actionButtons:[
                    {
                        id: 'insert',
                        caption: 'Create',
                        iconHTML: '<i class="las la-plus"></i>' 
                    },
                    {
                        id: 'edit',
                        caption: 'Edit',
                        iconHTML: '<i class="las la-pen"></i>' 
                    },
                    {
                        id: 'save',
                        caption: 'Save',
                        iconHTML: '<i class="las la-save"></i>' 
                    },
                    {
                        id: 'delete',
                        caption: 'Delete',
                        iconHTML: '<i class="las la-trash-alt"></i>' 
                    },
                ]
            }
        }

Определение данных

        let data = [//Можно использовать различные дополнительные колонки, например, для хранения reference key для связывания таблиц
            { id: '2024-08-01R01',url:'http://google.com', status: '<i class="las la-check-circle"></i>', name: 'Goods Recieve', counterparty: 'Good Goods LLC', date: '2024-08-01', amount: '5000', currency: 'SDR' },//iso date format
            { id: '2024-08-01R02',url:'http://google.com', status: '<i class="las la-check-circle"></i>', name: 'Goods Recieve', counterparty: 'Good Goods LLC', date: '2024-09-22', amount: '6000', currency: 'SDR' },
            { id: '2024-08-01R03',url:'http://google.com', status:'<i class="las la-check-circle"></i>',name: 'Goods Recieve', counterparty: 'Good Goods LLC', date: '2024-09-22', amount: '7000', currency: 'SDR' },
            { id: '2024-08-01R04',url:'http://google.com', status:'<i class="las la-check-circle"></i>',name: 'Goods Recieve', counterparty: 'Good Goods LLC', date: '2024-09-23', amount: '8000', currency: 'SDR' },
        ]

Определение HTML контейнера

    <div id="myTable" style={{ height: '500px' }}>
    </div>

Создание объекта Gridans

var gridans = new Gridans(configDoc, data, 'myTable');//conf, data, containerId

Конфигурация

Особенности реализации

Выделение строки по умолчанию - при прорисовки таблицы выделяется первая строка таблицы
Прорисовка таблицы срабатывает : 1. При создании таблицы, 2. При сортировке 3. При установки новой конфигурации 4. При установки новых данных
Выделение строки мышью - Левая кнопка мыши - только в режиме без мультивыбора. Правая кнопка мыши - в обоих режимах.
Контекстное меню на ячейках таблицы не работает, но выдается событие gridansContextMenu
Скроллинг таблицы - горизонтальный и вертикальный работают в трех положениях(крайние и середина - переходит автоматически). Для вертикального скроллинга - установка в верхнее положение вызывает событие lazyload_first , установка в нижнее положение вызывает событие lazyload_last. Если при этом установлена опция конфигурации simpleMode - то происходит скроллирование таблицы максимально вверх и максимально вниз соответственно. Горизонтальный скроллинг работает без событий как в режиме simpleMode . При вертикальном скроллировании максимально вверх вызывается событие lazyload_top, максимально вниз - lazyload_bottom

API

getters/setters

newData - устанавливает новые данные
newConf - устанавливает новую конфигурацию
currData - получает текущие данные
currConf - получает текущую конфигурацию

Методы

getDataLength() - возвращает количество строк данных, загруженных в таблицу
selectRow(id) - выделяет строку и позиционирует на ней. Если в загруженных данных не находится id, то в консоль выдается ошибка.
isSelectedAllRows() - возвращает есть ли режим выделения всех строк таблицы
getSelectedRows() - возвращает массив выделенных строк
lazyLoadDataBottom(additionalData) - добавляет новую порцию данных снизу
lazyLoadDataTop(additionalData) - добавляет новую порцию данных сверху

События

lazyload_bottom - загрузка новой порции данных снизу. event.detail = {tableName}
lazyload_top - загрузка новой порции данных сверху. event.detail = {tableName}
lazyload_first - загрузка первой порции данных. event.detail = {tableName}
lazyload_last - загрузка последней порции данных. event.detail = {tableName}
edt_click - событие нажатия на “педальку” в ячейке. event.detail = {tableName, columnName, rowId}
sorting - событие сортировки. event.detail = {tableName, columnName, isAsk}
SelectedSingleRow - событие выделения строки. event.detail = {tableName,selectRow(для мульти выделения строк - возвращает первую выделенную строку)}
RowDblClick - событие при двойном клике на строке event.detail = {tableName,selectRow}
actionButtonClick - событие нажатия на кнопку действий. event.detail = {tableName,action}
gridansContextMenu - событие вызова контекстного меню на ячейках таблицы event.detail = {tableName,selectRow(для мульти выделения строк - возвращает первую выделенную строку)}

Типы данных

String - обычная строка
Numeric - любое число
Date - дата. Поддерживаются форматы ISO YYYY-MM-DD и EUR DD.MM.YYYY
DateTime - Дата и время. Поддерживаются форматы ISO YYYY-MM-DDTHH:MM:SS и EUR DD.MM.YYYY HH:MM:SS
Url - строка ссылки. Переводится в <a/>
Lineawesomefont - иконочный шрифт. Строка - код иконки. Подробнее здесь.

Лицензия

Для частного использования и обучения - бесплатно.

По всем вопросам приобретения лицензии на продукт - обращайтесь в Telegramm @andsoft80

Gridans.ru.

Gridans - A component for displaying enterprise-grade tabular data in pure JavaScript without dependencies.

Quick start

Installation via npm

npm i gridansjs

Connecting to the project

import Gridans from 'gridansjs';
import '../node_modules/gridansjs/Gridans.css';

Defining the configuration

let configDoc = {
            cols: [
                { name: 'id', caption: 'ID', type: 'String', width: 100 },//mandatory column
                { name: 'status', caption: 'STATUS', type: 'Lineawesomefont', width: 10 },
                { name: 'name', caption: 'DOCUMENT NAME', type: 'String', width: 200 },
                { name: 'url', caption: 'URL', type: 'Url', width: 100 },
                { name: 'date', caption: 'DOCUMENT DATE', type: 'Date', width: 100 },
                { name: 'counterparty', caption: 'COUNTERPARTY', type: 'String', width: 100, edt: true },//with extend data type
                { name: 'currancy', caption: 'CURRANCY', type: 'String', width: 100, edt: true },
                { name: 'amount', caption: 'AMOUNT', type: 'Numeric', width: 100 },
            ],
            options: {
                checkboxes: false,
                simpleMode: false,//sort by table's level
                columnResizable: true,
                columnReorderable: true,
                columnSortable: true,
                sortSettings: [{
                    columnName: 'counterparty', //default sorting column name with sipmleSorting flag
                    isAsc: true
                }],
                columnHighlights: [
                    { columnName: 'status', colorClass: 'highlight-yellow' },
                    { columnName: 'counterparty', colorClass: 'highlight-red' },
                    // { columnName: 'email', colorClass: 'highlight-green' }
                ],
                actionButtons:[
                    {
                        id: 'insert',
                        caption: 'Create',
                        iconHTML: '<i class="las la-plus"></i>' 
                    },
                    {
                        id: 'edit',
                        caption: 'Edit',
                        iconHTML: '<i class="las la-pen"></i>' 
                    },
                    {
                        id: 'save',
                        caption: 'Save',
                        iconHTML: '<i class="las la-save"></i>' 
                    },
                    {
                        id: 'delete',
                        caption: 'Delete',
                        iconHTML: '<i class="las la-trash-alt"></i>' 
                    },
                ]
            }
        }

Data Definition

        let data = [//Можно использовать различные дополнительные колонки, например, для хранения reference key для связывания таблиц
            { id: '2024-08-01R01',url:'http://google.com', status: '<i class="las la-check-circle"></i>', name: 'Goods Recieve', counterparty: 'Good Goods LLC', date: '2024-08-01', amount: '5000', currancy: 'SDR' },//iso date format
            { id: '2024-08-01R02',url:'http://google.com', status: '<i class="las la-check-circle"></i>', name: 'Goods Recieve', counterparty: 'Good Goods LLC', date: '2024-09-22', amount: '6000', currancy: 'SDR' },
            { id: '2024-08-01R03',url:'http://google.com', status:'<i class="las la-check-circle"></i>',name: 'Goods Recieve', counterparty: 'Good Goods LLC', date: '2024-09-22', amount: '7000', currancy: 'SDR' },
            { id: '2024-08-01R04',url:'http://google.com', status:'<i class="las la-check-circle"></i>',name: 'Goods Recieve', counterparty: 'Good Goods LLC', date: '2024-09-23', amount: '8000', currancy: 'SDR' },
        ]

Defining an HTML Container

    <div id="myTable" style={{ height: '500px' }}>
    </div>

Creating a Gridans object

var gridans = new Gridans(configDoc, data, 'myTable');//conf, data, containerId

Configuration

Features of implementation

Row selection by default - when drawing a table, the first row of the table is selected
Table drawing is triggered: 1. When creating a table, 2. When sorting 3. When installing a new configuration 4. When installing new data
Row selection with the mouse - Left mouse button - only in the mode without multi-selection. Right mouse button - in both modes.
The context menu on table cells does not work, but the gridansContextMenu event is issued
Table scrolling - horizontal and vertical work in three positions (the outermost and middle ones - switch automatically). For vertical scrolling - setting it to the upper position causes the lazyload_first event, setting it to the lower position causes the lazyload_last event. If the simpleMode configuration option is set, the table is scrolled as far up and as far down, respectively. Horizontal scrolling works without events as in the simpleMode mode. When vertically scrolling up to the maximum, the lazyload_top event is called, when vertically scrolling down to the maximum, the lazyload_bottom event is called.

API

getters/setters

newData - sets new data
newConf - sets new configuration
currData - gets current data
currConf - gets current configuration

Methods

getDataLength() - returns the number of data rows loaded into the table
selectRow(id) - selects a row and positions on it. If the id is not found in the loaded data, an error is displayed in the console.
isSelectedAllRows() - returns whether there is a mode for selecting all table rows
getSelectedRows() - returns an array of selected rows
lazyLoadDataBottom(additionalData) - adds a new portion of data from the bottom
lazyLoadDataTop(additionalData) - adds a new portion of data from the top

Events

lazyload_bottom - loading a new portion of data from the bottom. event.detail = {tableName}
lazyload_top - loading a new portion of data from the top. event.detail = {tableName}
lazyload_first - loading the first portion of data. event.detail = {tableName}
lazyload_last - loading the last portion of data. event.detail = {tableName}
edt_click - event of pressing the “pedal” in the cell. event.detail = {tableName, columnName, rowId}
sorting - sorting event. event.detail = {tableName, columnName, isAsk}
SelectedSingleRow - event of selecting a row. event.detail = {tableName,selectRow(for multiple row selection - returns the first selected row)}
RowDblClick - event when double-clicking on a row event.detail = {tableName,selectRow}
actionButtonClick - event of clicking on the action button. event.detail = {tableName,action}
gridansContextMenu - event of calling the context menu on table cells event.detail = {tableName,selectRow(for multiple row selection - returns the first selected row)}

Types

String - a regular string
Numeric - any number
Date - date. Supported formats are ISO YYYY-MM-DD and EUR DD.MM.YYYY
DateTime - Date and time. Supported formats are ISO YYYY-MM-DDTHH:MM:SS and EUR DD.MM.YYYY HH:MM:SS
Url - link string. Translates to <a/>
Lineawesomefont - icon font. String - icon code. More details here.

License

For private use and education - free.

For all questions on purchasing a product license - contact Telegramm @andsoft80 Gridans.ru.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme