PHPackages                             net-tools/js-grid-editor - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. net-tools/js-grid-editor

ActiveLibrary[Utility & Helpers](/categories/utility)

net-tools/js-grid-editor
========================

Javascript API implementing a grid editor

1.0.10(2y ago)0611MITJavaScript

Since Sep 27Pushed 2y ago1 watchersCompare

[ Source](https://github.com/net-tools/js-grid-editor)[ Packagist](https://packagist.org/packages/net-tools/js-grid-editor)[ RSS](/packages/net-tools-js-grid-editor/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependencies (2)Versions (12)Used By (1)

net-tools/js-grid-editor
========================

[](#net-toolsjs-grid-editor)

Composer library with a Javascript grid editor
----------------------------------------------

[](#composer-library-with-a-javascript-grid-editor)

The library defines a Javascript `nettools.jsGridEditor` class which makes it possible to edit data stored as rows and columns.

Setup instructions
------------------

[](#setup-instructions)

To install net-tools/js-grid-editor package, just require it through composer : `require net-tools/js-grid-editor:^1.0.0`.

How to use ?
------------

[](#how-to-use-)

The `nettools.jsGridEditor` class constructor expects the following parameters :

- the `HTMLElement` node where the editor must be rendered (usually a DIV)
- an object litteral with options :
    - `columns` : an array of object litterals defining columns (see below)
    - `data` : an array of object litterals containing data (see below)
    - `editable` : a boolean value ; if set to false, the grid data can't be edited
    - `disableDblClick` : a boolean value ; if set to true, a double-click can't switch the row to edit mode
    - `defaultValues` : an object litteral containing default values for new lines
    - `dialog` : an object inheriting from `nettools.jsGridEditor.Dialog` with `alert` and `confirm` methods ; by default, Javasript `alert` and `confirm` functions are used
    - `rowToStringColumns` : an event to help convert column values for a given row to a string ; if a numeric (starting at 0) or 'first' is given, the conversion is a key=value string for the corresponding column. If 'all' is given, the conversion returns all key values separated with commas
    - `onRowValidate` : an event called to validate row data before exiting edit mode (rowData may be updated during call) ; return a resolved Promise to accept changes, or a rejected Promise with error message to reject updates
    - `onRowToString` : an event called to get a string value for a row (the default code for this event use `rowToStringColumns` value to generate the string)
    - `onRowChange` : an event called to notify the client that a row content has changed ; the client code must return a resolved Promise if he acknowledges the update, or a rejected Promise otherwise
    - `onRowDelete` : an event called to notify the client that a row has been deleted ; the client code must acknowledge the deletion and return a resolved Promise when done, or a rejected Promise if an error occured
    - `onRowInsert` : an event called to notify the client that a row has been inserted ; the client code must return a Promise when done, or a rejected Promise if an error occured
    - `onCellHtml` : an event called for 'html' columns to set some rich GUI inside TD node
    - `onGetCellHtmlValue` : an event called for 'html' columns in edit-mode to get edited value to store in dataset when committing row edits

The `columns` object litteral array defines all columns ; the allowed parameters for a column are (also, see sample below) :

- `id` : the column ID as a string ; will be used in `data` parameter as property name
- `title` : the title that will appear in table header for this column
- `subTitle` : the subtitle in table header for the column
- `type` : defines the type for the column (string, int, float, bool, list or html)
- `required` : bool value to enforce column mandatory status
- `hidden` : a bool value to hide the column
- `format` : regular expression to valide column data
- `readonly` : the column can't be edited
- `readonlyEdit` : the column can't be edited except when creating a new line
- `datalist` : if `type` property is *list*, defines an array of string values accepted as values
- `validator` : a custom function to validate column value (return *true* if value is accepted or *false* if value is rejected)

The `data` array of object litterals contains grid data : one object litteral per row, each object property is a column value. See sample below.

```
var grid = new nettools.jsGridEditor(document.getElementById('grid'),
	{
		// defining columns
		columns : [
			{ id : 'key', subTitle:'string(2)', format:/^[A-Z][A-Z0-9]$/, required : true, validator:function(v){ return v!='RU'; } },
			{ id : 'country', title : 'Country name', subTitle:'string', readonly : true },
			{ id : 'region', title : 'World area',  subTitle:'list', required : true, type:'list', datalist:['Europe', 'America', 'North-America', 'South-America', 'Asia', 'Africa'] },
			{ id : 'order', type : 'int', subTitle:'int'  },
            { id : 'english', title : 'Speak English ?',  subTitle:'bool(0/1)', required : true, type : 'bool' }
		],

		// data to edit
		data : [
			{ key : 'FR', country : 'France', region : 'Europe', order : 1, english : 0 },
			{ key : 'US', country : 'USA', region : 'North-America', order : 2, english : 1 },
			{ key : 'UK', country : 'United Kingdom', region : 'Europe', order : 3, english : 1 }
		],

		// grid is editable
		editable : true,

		// a row is converted to a string by return key=value for column 1 (second column)
		rowToStringColumns : 1,

		// default values for new lines
		defaultValues : {
			region : 'Asia',
			english : 1
		},

		// output in console values to validate
		onRowValidate : function(row, values)
			{
				console.log('Values to validate at row ' + row);
				console.log(values);
				return true;
			},

		// accepting updates in rows only for even one
		onRowChange : function(row, values)
			{
				console.log('Row changed at offset ' + row);
				console.log(values);

				if ( row % 2 == 0 )
					return Promise.resolve(row);
				else
					return Promise.reject('Row commit failed at row ' + row);
			},

		// processing deletion client-side ; if the user acknowledges deletion, the row is removed from dataset
		onRowDelete : function(row, values)
			{
				return new Promise(function(resolve, reject){
					if ( confirm('Confirm deletion has been processed client-side ?') )
						resolve(row);
					else
						reject('Deletion at row ' + row + ' denied');
				});
			},

		// procession new line ; if the user acknowledges insert, the row is inserted in the dataset
		onRowInsert : function(row, values)
			{
					return new Promise(function(resolve, reject){
						if ( confirm('Confirm insert has been processed client-side ?') )
							resolve(row);
						else
							reject('Insert at row ' + row + ' denied');
					});
			}
	}
);
```

There are several object methods that can be called :

- `setData` : if `data` options parameter is not set during constructor call, the data can be assigned to grid editor later by calling `setData` method with an array of object litterals.
- `isInserting` : returns *true* if the editor is currently inserting a new line
- `insertRow` : switch the editor to insert mode, filling the empty new line with default values provided
- `editRow` : edit the row at offset in parameter
- `deleteRow` : delete the row at offset in parameter ; the user is asked to confirm row deletion ; the `onRowDelete` event is called to notify client-side

Samples
-------

[](#samples)

There are one sample inside `/samples` subdirectory :

- **editor.html**

###  Health Score

23

—

LowBetter than 27% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity8

Limited adoption so far

Community9

Small or concentrated contributor base

Maturity49

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~3 days

Total

11

Last Release

927d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/2cb0c1d404c8ae72b0a731246130079c2f440d6ea079815ca8c153aa361b1f28?d=identicon)[nettools.ovh](/maintainers/nettools.ovh)

---

Top Contributors

[![net-tools](https://avatars.githubusercontent.com/u/6818724?v=4)](https://github.com/net-tools "net-tools (15 commits)")

### Embed Badge

![Health badge](/badges/net-tools-js-grid-editor/health.svg)

```
[![Health](https://phpackages.com/badges/net-tools-js-grid-editor/health.svg)](https://phpackages.com/packages/net-tools-js-grid-editor)
```

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)