gs-grid

A new grid for evolving web.

Built with web components & it's framework agnostic.

Demo & Docs

Package

Current Features

1. Framework-agnostic Web Component usage
2. Configurable columns with nested field access
3. Built-in column sorting
4. Global search across configured fields
5. CSV and Excel export helpers
6. Virtualized row rendering
7. Smart custom scrollbar behavior
8. Optional row selection with runtime APIs

Install

yarn add @gs-grid/gs-grid

Basic Usage

import '@gs-grid/gs-grid';
import { GridConfig, GridEvents } from '@gs-grid/gs-grid';

const gridConfig = new GridConfig();
gridConfig.rowHeight = 32;
gridConfig.enableRowSelection = true;
gridConfig.columnDefs = [
	{ field: 'name', headerName: 'Name', enableSort: true, width: 180 },
	{ field: 'email', headerName: 'Email', enableSort: true, width: '30%' },
	{ field: 'company.name', headerName: 'Company', enableSort: true, width: 180 }
];
gridConfig.data = data;

const gridEl = document.querySelector('gs-grid');
const instanceId = gridEl?.getAttribute('instance-id');

if (gridEl && instanceId) {
	GridEvents.setupGridConfig(instanceId, gridConfig);
}

<gs-grid></gs-grid>

Browser Compatibility

| Browser | Minimum Version | |---------|----------------| | | 67+ | | | 79+ | | | 63+ | | | 10.1+ | | | 54+ |

Requires native Web Components support (Custom Elements v1 + Shadow DOM v1).

Upcoming Features

1. Pinning
2. Grouping
3. Column resizing
4. Column dynamic re-order

Steps to run locally:

• Install packages locally with: yarn install

• Run demo & docs locally with: yarn start

• If necessary, clean locally generated dist & docs with: yarn clean