# @lit-html-free/grid

> Lit html data grid

Latest version **0.0.1-alpha.15** (published 2019-09-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install @lit-html-free/grid
pnpm add @lit-html-free/grid
yarn add @lit-html-free/grid
bun add @lit-html-free/grid
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1-alpha.15 |
| Published | 2019-09-06 |
| First published | 2019-08-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 373.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Vegar Ringdal |
| Maintainers | vegarringdal |

## Links

- npm: https://www.npmjs.com/package/@lit-html-free/grid
- Repository: https://github.com/vegarringdal/lit-html-free
- Issues: https://github.com/vegarringdal/lit-html-free/issues
- npm.io page: https://npm.io/package/@lit-html-free/grid

## Dependencies (1)

- [lit-html](https://npm.io/package/lit-html.md) ^1.1.1

## Recent versions

- 0.0.1-alpha.15 (latest) — 2019-09-06
- 0.0.1-alpha.14 — 2019-09-03
- 0.0.1-alpha.13 — 2019-09-01
- 0.0.1-alpha.12 — 2019-08-29
- 0.0.1-alpha.11 — 2019-08-29
- 0.0.1-alpha.10 — 2019-08-28
- 0.0.1-alpha.9 — 2019-08-28
- 0.0.1-alpha.8 — 2019-08-28
- 0.0.1-alpha.7 — 2019-08-27
- 0.0.1-alpha.6 — 2019-08-26
- 0.0.1-alpha.5 — 2019-08-25
- 0.0.1-alpha.4 — 2019-08-24
- 0.0.1-alpha.3 — 2019-08-18
- 0.0.1-alpha.2 — 2019-08-17
- 0.0.1-alpha.1 — 2019-08-16

## README

# @lit-html-free/grid

Simple data grid made with lit-html Makes displaying a local array very easy. Support:

-   Grouping
-   filtering
-   multi sorting
-   mulitiselect rows
-   get/set setting - inluding sorting/grouping with expaned

### Install

-   `npm install @lit-html-free/grid`

### Sample

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

### Bundle size:

https://bundlephobia.com/result?p=@lit-html-free/grid

### Docs

JS

```ts
// import grid and its css
import '@lit-html-free/grid';
import '@lit-html-free/grid/dist/esm/grid.css';
```

HTML

```html
// 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

```ts
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 };
```

---
_Source: https://npm.io/package/@lit-html-free/grid · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._