lit-html-free-grid

Simple data grid made with lit-element Needs lit-html to use.

npm install
npm start

sample

https://stackblitz.com/edit/lit-html-free-grid-alpha?file=colSetup.ts

usage with lit-html

lit-html-free-grid@alpha

// import grid and its css
import 'lit-html-free-grid';
import 'lit-html-free-grid/grid.css';

 
// lit html
<free-grid
    style="margin:20px;width:800px;height:400px"
    class="free-grid"
    .data=${this.mydata}
    .config=${this.gridConfig}
>
</free-grid>
// if you are not using lit-html then u need to set data and config on the html element
 

Config

 
 
export interface IColumns {
    header?: string;
    attribute: string;
    /**Default FALSE */
    readonly?: boolean;
    /**Default FALSE */
    disabled?: boolean;
    /**Default FALSE */
    hide?: boolean;
    /**Default 100 */
    width?: number;
    filterable?: {
        /**Default FALSE */
        filterOverLabel?: boolean;
        beforeFilterCallbackFn?: ColumnCallBackFn;
        /**Default TRUE */
        auto?: boolean;
        /**Default CHANGE */
        filterTrigger?: Triggers;
        /**Default STRING/TEXT */
        currentValue?: string | number | boolean | Date;
        placeholder?: string;
        /**Default BEGIN WITH */
        operator?: FilterOperator;
    };
    sortable?: {
        sortAscending?: boolean;
        sortNo?: number;
        beforeSortCallbackFn?: ColumnCallBackFn;
        /**Default TRUE */
        auto?: boolean;
    };
    type?: DataTypes;
    beforeEditCallbackFn?: CellCallbackFn;
    /**Default TRUE */
    autoUpdateData?: boolean;
    afterEditCallbackFn?: CellCallbackFn;
    editEventType?: Triggers;
    rowRenderCallBackFn?: renderCallBackFn;
    headerRenderCallBackFn?: renderCallBackFn;
    headerRenderLabelCallBackFn?: renderCallBackFn;
    headerRenderInputCallBackFn?: renderCallBackFn;
    disableDragDrop?: boolean;
    allowGrouping?: boolean;
}
 
export interface IGridConfig {
    columns: IColumns[];
    rowHeight: number;
    panelHeight?: number;
    headerHeight: number;
    footerHeight: number;
    scrollLeft?: number;
    lastScrollTop?: number;
    selectionMode?: SelectionMode;
    beforeSelectionChangeCallBackFn?: RowCallBackFn;
    afterSelectionChangeCallBackFn?: RowCallBackFn;
    rowRenderCallBackFn?: renderCallBackFn;
    footerRenderCallBackFn?: renderCallBackFn;
    headerRenderCallBackFn?: renderCallBackFn;
    groupingSet?: IGroupingObj[];
}
 
export type CallbackEvent = { target: HTMLInputElement };
export type ColumnCallBackFn = (e: CallbackEvent, col: IColumns, freeGrid: FreeGrid) => void;
export type CellCallbackFn = (e: CallbackEvent, col: IColumns, row: number, data: IDataRow, freeGrid: FreeGrid) => void;
export type RowCallBackFn = (e: CallbackEvent, row: number, freeGrid: FreeGrid) => void;
export type renderCallBackFn = (html: any, col: IColumns, row: number, data: IDataRow, freeGrid: FreeGrid) => void;
 
export type FilterOperator = 
    | 'EQUAL'
    | 'LESS_THAN_OR_EQUAL_TO'
    | 'GREATER_THAN_OR_EQUAL_TO'
    | 'LESS_THAN'
    | 'GREATER_THAN'
    | 'CONTAINS'
    | 'NOT_EQUAL_TO'
    | 'DOES_NOT_CONTAIN'
    | 'BEGIN_WITH'
    | 'END_WITH';
export type DataTypes = 'text' | 'number' | 'image' | 'boolean' | 'date';
export type Triggers = 'input' | 'change';
export type SelectionMode = 'none' | 'single' | 'multiple';
export type rowCache = { i: number };