{"id":28495220,"url":"https://github.com/net-tools/js-grid-editor","last_synced_at":"2025-07-01T18:31:20.324Z","repository":{"id":183914004,"uuid":"671022479","full_name":"net-tools/js-grid-editor","owner":"net-tools","description":"Javascript grid editor","archived":false,"fork":false,"pushed_at":"2023-11-01T10:06:59.000Z","size":70,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-08T11:08:24.839Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/net-tools.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-07-26T11:11:58.000Z","updated_at":"2023-09-27T11:39:21.000Z","dependencies_parsed_at":"2023-07-26T11:34:33.562Z","dependency_job_id":"dda56149-69c6-45d4-a6b2-b49efdad153f","html_url":"https://github.com/net-tools/js-grid-editor","commit_stats":null,"previous_names":["net-tools/js-grid-editor"],"tags_count":10,"template":false,"template_full_name":null,"purl":"pkg:github/net-tools/js-grid-editor","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/net-tools%2Fjs-grid-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/net-tools%2Fjs-grid-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/net-tools%2Fjs-grid-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/net-tools%2Fjs-grid-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/net-tools","download_url":"https://codeload.github.com/net-tools/js-grid-editor/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/net-tools%2Fjs-grid-editor/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263017173,"owners_count":23400442,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-06-08T11:08:25.296Z","updated_at":"2025-07-01T18:31:20.314Z","avatar_url":"https://github.com/net-tools.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# net-tools/js-grid-editor\n\n## Composer library with a Javascript grid editor\n\nThe library defines a Javascript `nettools.jsGridEditor` class which makes it possible to edit data stored as rows and columns.\n\n\n## Setup instructions\n\nTo install net-tools/js-grid-editor package, just require it through composer : `require net-tools/js-grid-editor:^1.0.0`.\n\n\n\n\n## How to use ?\n\nThe `nettools.jsGridEditor` class constructor expects the following parameters :\n- the `HTMLElement` node where the editor must be rendered (usually a DIV)\n- an object litteral with options :\n  + `columns` : an array of object litterals defining columns (see below)\n  + `data` : an array of object litterals containing data (see below)\n  + `editable` : a boolean value ; if set to false, the grid data can't be edited\n  + `disableDblClick` : a boolean value ; if set to true, a double-click can't switch the row to edit mode\n  + `defaultValues` : an object litteral containing default values for new lines\n  + `dialog` : an object inheriting from `nettools.jsGridEditor.Dialog` with `alert` and `confirm` methods ; by default, Javasript `alert` and `confirm` functions are used\n  + `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\n  + `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\n  + `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)\n  + `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\n  + `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\n  + `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\n  + `onCellHtml` : an event called for 'html' columns to set some rich GUI inside TD node\n  + `onGetCellHtmlValue` : an event called for 'html' columns in edit-mode to get edited value to store in dataset when committing row edits\n\n\nThe `columns` object litteral array defines all columns ; the allowed parameters for a column are (also, see sample below) :\n- `id` : the column ID as a string ; will be used in `data` parameter as property name\n- `title` : the title that will appear in table header for this column\n- `subTitle` : the subtitle in table header for the column\n- `type` : defines the type for the column (string, int, float, bool, list or html)\n- `required` : bool value to enforce column mandatory status\n- `hidden` : a bool value to hide the column\n- `format` : regular expression to valide column data\n- `readonly` : the column can't be edited\n- `readonlyEdit` : the column can't be edited except when creating a new line\n- `datalist` : if `type` property is *list*, defines an array of string values accepted as values\n- `validator` : a custom function to validate column value (return *true* if value is accepted or *false* if value is rejected)\n\n\nThe `data` array of object litterals contains grid data : one object litteral per row, each object property is a column value. See sample below.\n\n\n```javascript\nvar grid = new nettools.jsGridEditor(document.getElementById('grid'),\n\t{\n\t\t// defining columns\n\t\tcolumns : [ \n\t\t\t{ id : 'key', subTitle:'string(2)', format:/^[A-Z][A-Z0-9]$/, required : true, validator:function(v){ return v!='RU'; } },\n\t\t\t{ id : 'country', title : 'Country name', subTitle:'string', readonly : true }, \n\t\t\t{ id : 'region', title : 'World area',  subTitle:'list', required : true, type:'list', datalist:['Europe', 'America', 'North-America', 'South-America', 'Asia', 'Africa'] },\n\t\t\t{ id : 'order', type : 'int', subTitle:'int'  },\n            { id : 'english', title : 'Speak English ?',  subTitle:'bool(0/1)', required : true, type : 'bool' }\n\t\t],\n\t\n\t\t// data to edit\n\t\tdata : [\n\t\t\t{ key : 'FR', country : 'France', region : 'Europe', order : 1, english : 0 },\n\t\t\t{ key : 'US', country : 'USA', region : 'North-America', order : 2, english : 1 },\n\t\t\t{ key : 'UK', country : 'United Kingdom', region : 'Europe', order : 3, english : 1 }\n\t\t],\n\t\n\t\t// grid is editable\n\t\teditable : true,\n\t\n\t\t// a row is converted to a string by return key=value for column 1 (second column)\n\t\trowToStringColumns : 1,\n\t\n\t\t// default values for new lines\n\t\tdefaultValues : {\n\t\t\tregion : 'Asia',\n\t\t\tenglish : 1\n\t\t},\n\t\t\n\t\t// output in console values to validate\n\t\tonRowValidate : function(row, values)\n\t\t\t{\n\t\t\t\tconsole.log('Values to validate at row ' + row);\n\t\t\t\tconsole.log(values);\n\t\t\t\treturn true;\n\t\t\t},\n\t\n\t\t// accepting updates in rows only for even one\n\t\tonRowChange : function(row, values)\n\t\t\t{\n\t\t\t\tconsole.log('Row changed at offset ' + row);\n\t\t\t\tconsole.log(values);\n\t\t\t\t\n\t\t\t\tif ( row % 2 == 0 )\n\t\t\t\t\treturn Promise.resolve(row);\n\t\t\t\telse\n\t\t\t\t\treturn Promise.reject('Row commit failed at row ' + row);\n\t\t\t},\n\t\n\t\t// processing deletion client-side ; if the user acknowledges deletion, the row is removed from dataset\n\t\tonRowDelete : function(row, values)\n\t\t\t{\n\t\t\t\treturn new Promise(function(resolve, reject){\n\t\t\t\t\tif ( confirm('Confirm deletion has been processed client-side ?') )\n\t\t\t\t\t\tresolve(row);\n\t\t\t\t\telse\n\t\t\t\t\t\treject('Deletion at row ' + row + ' denied');\n\t\t\t\t});\n\t\t\t},\n\t\n\t\t// procession new line ; if the user acknowledges insert, the row is inserted in the dataset\n\t\tonRowInsert : function(row, values)\n\t\t\t{\n\t\t\t\t\treturn new Promise(function(resolve, reject){\n\t\t\t\t\t\tif ( confirm('Confirm insert has been processed client-side ?') )\n\t\t\t\t\t\t\tresolve(row);\n\t\t\t\t\t\telse\n\t\t\t\t\t\t\treject('Insert at row ' + row + ' denied');\n\t\t\t\t\t});\n\t\t\t}\n\t}\n);\n```\n\nThere are several object methods that can be called :\n- `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.\n- `isInserting` : returns *true* if the editor is currently inserting a new line\n- `insertRow` : switch the editor to insert mode, filling the empty new line with default values provided\n- `editRow` : edit the row at offset in parameter\n- `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\n\n\n\n## Samples\n\nThere are one sample inside `/samples` subdirectory :\n\n- **editor.html**\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnet-tools%2Fjs-grid-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnet-tools%2Fjs-grid-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnet-tools%2Fjs-grid-editor/lists"}