lit-element-free-grid
Simple data grid made with lit-element You need lit html to use this
npm install
npm start
usage with lit-html
<free-grid style="margin:20px;width:800px;height:400px" class="free-grid" .data=${this.mydata} .config=${this.gridConfig}></free-grid>
Config
export type CallbackEvent = { target: HTMLInputElement };export type ColumnCallBackFunction = (e: CallbackEvent, col: IColumns, freeGrid: FreeGrid) => void;export type CellCallbackFunction = (e: CallbackEvent, col: IColumns, row: number, data: any, freeGrid: FreeGrid) => void;export type RowCallBackFunction = (e: CallbackEvent, row: number, 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 }; export interface IGridConfig { columns: IColumns[]; rowHeight: number; panelHeight?: number; headerHeight: number; footerHeight: number; scrollLeft?: number; lastScrollTop?: number; selectionMode?: SelectionMode; beforeSelectionChange?: RowCallBackFunction; afterSelectionChange?: RowCallBackFunction;} export interface IColumns { header?: string; attribute: string; readonly?: boolean; disabled?: boolean; width?: number; filterable?: { filterTop?: boolean; beforeFilterCallback?: ColumnCallBackFunction; auto?: boolean; filterTrigger?: Triggers; setvalue?: string | number | boolean | Date; placeholder?: string; operator?: FilterOperator; }; sortable?: { sortAscending?: boolean; sortNo?: number; beforeSortCallback?: ColumnCallBackFunction; auto?: boolean; }; type?: DataTypes; beforeEditCallback?: CellCallbackFunction; auto?: boolean; afterEditCallback?: CellCallbackFunction; editTrigger?: Triggers;}