PHPackages edi-table/edi-table - 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. edi-table/edi-table ActiveLibrary edi-table/edi-table =================== ediTable is a JQuery plugin that lets you create table via json,make it sortable, also editable so you can manipulate any cell, set type of input for every cell (text, number, color, select, image, checkbox...) validate cells, make them required etc... add buttons edit/delete/custom buttons... v0.0.3(7y ago)14122MITJavaScript Since Apr 7Pushed 1y ago1 watchersCompare [ Source](https://github.com/MessaoudiMohammed/ediTable)[ Packagist](https://packagist.org/packages/edi-table/edi-table)[ Docs](https://github.com/OxiGen1001/ediTable)[ RSS](/packages/edi-table-edi-table/feed)WikiDiscussions master Synced 2d ago READMEChangelogDependenciesVersions (3)Used By (0) ediTable v0.0.3 (beta) Jquery Plugin ==================================== [](#editable-v003-beta-jquery-plugin) ediTable is a JQuery plugin that lets you create table via json,make it sortable, also editable so you can manipulate any cell, set type of input for every cell (text, number, color, select, image, checkbox...) validate cells, make them required etc... add buttons edit/delete/custom buttons... Demo: - Basic: [link](https://codepen.io/oxigen1001/pen/zYQXaeE) - Advanced: [link](https://codepen.io/oxigen1001/pen/MWdRXxJ) Features overview ----------------- [](#features-overview) - Works with any Design Framework (bootstrap,material,materializecss...). - Creation via (html/json/mix). - Editable/Sortable table. - Type of columns (text, number, color, select, image, checkbox...). - Validation of inputs columns + Require. - Function Before/After Actions ( for Mask plugins,Design etc...) Log: ---- [](#log) - v0.0.3 1. get data of table. 2. save/delete via AJAX. 3. fix some bugs - v0.0.2: 1. add new property unchecked. 2. checkbox accepts boolean/string/numbers. Installation ------------ [](#installation) Include css file if you're interested by it (not required) in your HTML code. ``` ``` Include Libs in your HTML code: ``` ``` Usage ----- [](#usage) - Creating table via JSON : ``` $("table").ediTable({ json: { body:jsonArray, }, }); ``` - Creating table via HTML ``` ID Name 1 Med $("table").ediTable(); ``` - Creating table via (HTML/JSON) ``` ID Name 1 Med $("table").ediTable({ json: { body:jsonArray, }, }); ``` Options ------- [](#options) NameTypeDefaultDescriptioneditablebooleantruemake table editablesortablebooleanfalsemake table sortablejsonObject------create and define columns (type, title)buttonObject------add edit, delete & custom buttonsaddbooleanfalseadd new rowkeyboardbooltrueallow Esc/Enter canceling/saving rowbeforeSaveFunction------before switching to save modeafterSaveFunction------after switching to save modebeforeEditFunction------before switching to edit modeafterEditFunction------after switching to edit modebeforeDeleteFunction------before switching to delete modeafterDeleteFunction------after switching to delete moderequiredActionFunction------action on required errorinvalidActionFunction------action on invalid errorNote: - double click if you wanna edit row. - click on the last row to add new one ( set add:true ) Extra Information ================= [](#extra-information) JSON object ----------- [](#json-object) json option has 2 arrays, head & body: 1. head is empty array by default and its role is defining columns: -E.G: ``` //... json:{ head: [ { title:"Column 1", // TH tag(string), default is name property type:"number", // default text validation:false, //default true, required:false, //default true min:-5, // works with only (number) max:5, // works with only (number) editable:false //default true }, { title:"Column 2", type:"checkbox", checked:"x", // all cells with x value will be checked // required property unchecked:"y", label:function($value){ // $value return value1 (x) or value2 if($value==something) return "label1" // e.g : "Active"/"paid"... return "label2" // e.g : "Unactive"/"unpaid"... }, editable:true, }, { type:"select", data: // required property [ { value:0, label:"male" }, { value:1, label:"female" } ], }, { title:"Pic profil", type:"image", // non-editable }, ] } ``` Note: if you don't wanna define some column, you need to set it ,{}, ``` //... { title:"X", type:"type1" }, {}, // if you don't wanna define this column. { title:"Y", type:"type2" }, ``` 2. body is empty array by default and its where you set your data (JSON data): e.g: ``` json:{ body: [ //... { id:70, name:"Med", birthday:"1789-01-04", //... } //... ] } ``` Button object ------------- [](#button-object) Button is object where you can set your custom buttons or active edit/delete buttons, it has 2 objects, edit & delete button with default values : 1. edit/delete objects: -E.G: ``` //... button: { edit: { active:true, // default: false text:"", // default: edit (text when row in show mode) textActive:"", // default: edit (text when row in edit mode) selector:"editButton", // class, default: edit }, delete: { active:true, // default: false //required property text:"", // default: delete selector:"deleteButton", // class, default: delete }, title:"Custom Title" // TH of column default : Actions } //... ``` 2. creating custom button: ``` //... customButton1: { active:true, text:"whatever", //textActive:"", // you can use it if you wanna change button's text in the edit mode. selector:"customButtonSelector", action:function(values,tr) // action on click. { // some logic } } //... ``` Save ---- [](#save) 1. Save via Ajax (by row) using jquery function $.ajax ``` //... afterSave:function(values,oldvalues){ formdata=new FormData(); $.each(values,function(index,cellValue){ formdata.append(index,cellValue); }); $.ajax({ url:"/path/serverFile[.extension]", data:formdata, type:"method", success:function(resp){} }); }, ``` 2. Delete via Ajax (by row) using jquery function $.ajax ``` //.. afterDelete:function(values) { $.ajax({ url:"/path/serverFile[.extension]", data:{id:values._id}, success:function(resp){} }); } //... ``` 3. Get the table data - ediTable library applied on a single table : ``` var table=$("#table1").ediTable({[...]}); table.data(); ``` - ediTable library applied on multi tables : ``` var table=$("table").ediTable({[...]}); index = 0; // 0 => first table | 1 => second table | ... table.data(index); //index of table 0,1,2... ``` Columns Types ------------- [](#columns-types) Types of columns inputs. Name/Propertiesvalidationeditablerequiredtitledatalabelminmaxcheckeduncheckedtext✓✓✓checkbox✓✓✓✓✓number✓✓✓✓✓✓image✓select✓✓✓✓url✓✓✓✓✓color✓✓✓✓email✓✓✓✓Methods Arguments ----------------- [](#methods-arguments) ``` beforeSave:function(values,$tr){}, afterSave:function(newValues,oldValues,$tr){}, beforeEdit:function(values,$tr){}, afterEdit:function(values,$tr){}, beforeDelete:function(values,$tr){}, afterDelete:function(values,$tr){}, ``` Contact ======= [](#contact) - any bug/issue you fall in you can report it. - any suggest contact me. ### Health Score 28 — LowBetter than 54% of packages Maintenance27 Infrequent updates — may be unmaintained Popularity14 Limited adoption so far Community9 Small or concentrated contributor base Maturity51 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 Unknown Total 1 Last Release 2594d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/6f9f2a1f19cbb348ab31fdfd27be123e783345f5fb502fb18410fd008124e1b8?d=identicon)[OxiGen](/maintainers/OxiGen) --- Top Contributors [![MessaoudiMohammed](https://avatars.githubusercontent.com/u/37954716?v=4)](https://github.com/MessaoudiMohammed "MessaoudiMohammed (62 commits)") --- Tags bootstrapconstructionhtmlhtml5javascriptjquerymaterial-designmaterializecsstablejavascriptjquerysortablebootstrapformselecttablecheckboxmaterialeditable ### Embed Badge ![Health badge](/badges/edi-table-edi-table/health.svg) ``` [![Health](https://phpackages.com/badges/edi-table-edi-table/health.svg)](https://phpackages.com/packages/edi-table-edi-table) ``` ### Alternatives [snapappointments/bootstrap-select The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more. Now with Bootstrap 4 support. 9.8k480.4k3](/packages/snapappointments-bootstrap-select)[wenzhixin/bootstrap-table An extended table to integration with some of the most widely used CSS frameworks. (Supports Bootstrap, Semantic UI, Bulma, Material Design, Foundation) 11.8k283.4k1](/packages/wenzhixin-bootstrap-table)[kartik-v/yii2-markdown Advanced Markdown editing and conversion utilities for Yii Framework 2.0 88265.8k6](/packages/kartik-v-yii2-markdown)[datatables.net/datatables.net-bs5 DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table. This is DataTables with styling for \[Bootstrap5\](https://getbootstrap.com/) 2185.7k16](/packages/datatablesnet-datatablesnet-bs5) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)