ingrids

A simple, dependency-free JavaScript data grid library.

This package provides a lightweight grid component that can be easily integrated into any web project. It has been refactored to use modern JavaScript (ES6+) and has no external dependencies like jQuery.

Installation

npm install ingrids

Usage

First, you need an HTML container element for your grid.

<!-- index.html -->
<div id="my-grid"></div>

Then, in your JavaScript file, you can import and initialize the grid.

// main.js
import { InGrid } from 'ingrids';

// 1. Define your column structure
const columns = [
    { name: 'ID', key: 'id', width: '50' },
    { name: 'Name', key: 'name', width: '200', readonly: false }, // Editable column
    { 
        name: 'Email', 
        key: 'email', 
        width: '250',
        onClick: (cell) => { 
            alert(`Clicked on ${cell.row.name}'s email!`);
        }
    }
];

// 2. Prepare your data
const data = [
    { id: 1, name: 'John Doe', email: '[email protected]' },
    { id: 2, name: 'Jane Smith', email: '[email protected]' }
];

// 3. Create a new InGrid instance
const myGrid = new InGrid('my-grid', { draggable: true }, columns); // draggable option here

// 4. Load the data
myGrid.setData(data);

// 5. To get the current data from the grid (e.g., after user edits)
// const currentData = myGrid.getData();
// console.log(currentData);

API

new InGrid(elementId, tableOptions, columns)

Creates a new grid instance.

• elementId (string): The ID of the HTML element where the grid will be rendered.
• tableOptions (object): Options for the grid table.
  • class (string): CSS class for the table.
  • draggable (boolean): Set to true to enable drag-and-drop row reordering. Default is false.
• columns (array): An array of column definition objects.

Column Definition Object

| Property | Type | Description | |------------|----------|--------------------------------------------------------------------------| | name | string | The text to display in the column header. | | key | string | The key to access the corresponding value in the data objects. | | width | string | The width of the column in pixels (e.g., '150'). | | align | string | Text alignment ('left', 'center', 'right'). Default is 'center'. | | readonly | boolean | If false, the cells in this column will be rendered as input fields. | | onClick | function | A callback function to execute when a cell in this column is clicked. |

Instance Methods

setData(data)

Renders the grid with the provided data.

• data (array): An array of data objects.

getData()

Returns an array of objects representing the current data in the grid, including any user edits.

load(dataSource)

Loads data from a remote URL using axios.

• dataSource (object): e.g., { api: { readData: { url: '/api/data', initParams: {} } } }.

License

ISC