Have ideas to improve npm?Join in the discussion! »

    bomtable

    2.3.8 • Public • Published
    bomtable logo

    demo


    web table like simple excel
    web таблица - упрощенная версия excel
    Simple javascript library for working with data, use familiar interface excel
    Простая javascript библиотека для работы с табличными данным, используя привычный интерфейс excel


    1. How to use | как использовать
    2. Examples | примеры
    3. Options | параметры
    4. Methods | методы
    5. Browser support | поддержка браузерами
    6. License | лицензия

    How to use

    как использовать

    Yarn install

    yarn add bomtable
    
    let instance = new BomTable({
        tableClass: 'ex-tbl',
        container: '.example',
        data: [[0, 7, 8, 9], [1, 20, 30], [2, 5], [3], [4, 56, 55, 22, 15, 18], [5, 7, 1], [6]],
        header: ['0', '1', '2', '3', '4', '5', '6'],
    });

    Examples

    renders example

    let instance = new BomTable({
        tableClass: 'ex-tbl',
        container: '.example',
        data: [[0, 7, 8, 9], [1, 20, 30], [2, 5], [3], [4, 56, 55, 22, 15, 18], [5, 7, 1], [6]],
        header: ['0', '1', '2', '3', '4', '5', '6'],
    
        renders: (inst, td, colNum, rowNum, val, cellMeta) => {
            if (colNum === 2) td.style.color = 'tomato'
            if (val === 1) td.style.color = 'green'
        },
    
    });

    Options

    параметры

    let opts = {
        data: [], // data for table body (default empty array) | массив с данными
        header: '', // table header (default empty string) | массив с заголовками для таблицы
        stickyHeader: true, // sticky table header | прилипающий заголовок таблицы 
        touchSupport: true, // support touch in browsers | поддержка касаний в браузерах
        tableClass: '', // css class for table (default empty) | css класс для таблицы
        container: null, // node or selector for mount table (default null) | HTML элемент или селектор для монтирования таблицы
        rowsClass: '', // css class for table rows (default empty string) | css класс для строк
        colsClass: '', // css class for table cols (default empty string) | css класс для столбцов
        useHistory: true, // use state history (default true) | использовать историю состояния
        colsResize: false, // resizable columns | колонки изменяемого размера
    
        renders: null, // function for render cells | функция для рендера ячеек
    
        // context menu | контекстное меню
        contextMenu: {
            items: {}, // items - object with list item | объект со списком элементов меню
            callback: (action, instance, event) => {} // default null | функция обратного вызова, срабатывает по клику по пункту меню
        },
    
        // if headers sets, use this menu like context menu | если заданы заголовки, готовить так же как контекстное меню
        // default empty
        headerMenu: {
            items: {}, // items - object with list item | объект со списком элементов меню
            callback: (action, instance, event) => {} // default null | функция обратного вызова, срабатывает по клику по пункту меню
        },
    
        // event hooks 
        hooks: {
            beforeContextMenuRender: (instance, list) => {
                // here you can change the menu list
                list.removeRows = 'remove row'; 
            },
            beforeHeaderMenuRender: (instance, list) => {
                // here you can change the menu list
                list.removeRows = 'remove row'; 
            }
        }
    };

    Methods

    методы

    data - (getter) get table data | получить данные из таблицы ({Array})
    
    header - (getter) get table header | получить заголовки таблицы ({Array})
    
    selectedMap - (getter) get selected map | получить карту выделенных элементов ({Array})
    
    selectedData - (getter) get data of selected area | получить данные с выделенной области ({Array})
    
    dataCell(col {number}, row {number}) - (getter) get cell value | получить значение ячейки
    
    selectedRows - (getter) get index of selected rows | получить индексы выделенных строк ({Array})
    
    selectedCols - (getter) get index of selected cols | получить индексы выделенных столбцов ({Array})
    
    dataRow - (getter) get row data by index | получить данные строки по индексу ({Array})
     
    dataCol - (getter) get col data by index | получить данные столбца по индексу ({Array})
    
    metaDataCell - (getter) get cell meta data by property name | получить мета данные ячейки по имени свойства ({Any})
    

    data = {Array} - (setter) set new data | установить новые данные
    
    header = {Array} - (setter) set new data header | установить новые заголовки
    
    dataCell = {col: {number}, {row: {number}, val: {*}) - (setter) set new value in cell | установить новое значение ячейки
    
    dataRow - {row: {number(rowIndex)}, data: {Array}} (setter) - set new row values | установить новые значени для строки 
     
    dataCol - {col: {number(colIndex)}, data: {Array}} (setter) - set new col values | установить новые значени для столбца
    
    metaDataCell - {col: {number}, row: {number}, propName: {String} val: {Any}} - set any data for cell by property name | установить любые мета данные для ячейки по имени свойства
    

    addRow() - create new row | создать новую строку
    
    addCol() - create new col | создать новый столбец
    
    removeRows({Array}) - remove get rows or selected rows | удалить строки по индексам передающихся входным параметром
    
    removeCols({Array}) - remove get cols or selected cols | удалить столбцы по индексам передающихся входным параметром
    
    unionRows({Array})  - union get rows or selected rows | объеденить строки по индексам
    
    unionCols({Array})  - union get cols or selected cols | объеденить столбцы по индексам
    
    removeHeader() - remove table header | удалить заголовок таблицы
    

    render() - rerender instance data | перерендерить данные
    
    clear() - clear data of instance | очистить instance
    
    destroy() - destroy instance | разрушить instance
    

    Hooks

    Хуки

    beforeContextMenuRender (instance: {BomTable}, menuList: {Object})
    
    beforeHeaderMenuRender (instance: {BomTable}, menuList: {Object})
    

    Browser support

    поддержка браузерами

    Chrome 67+, Mozilla Firefox 59+, IE9+, Touch support

    license

    лицензия

    Standard MIT license

    Install

    npm i bomtable

    DownloadsWeekly Downloads

    12

    Version

    2.3.8

    License

    MIT

    Unpacked Size

    291 kB

    Total Files

    24

    Last publish

    Collaborators

    • avatar