Spreadsheet Agility for Enterprise Web Tables.
Turn static HTML and jQuery DataTables into fully editable spreadsheets. Featuring instant click-to-edit inline cells, popover bubble fields, full-row modals, and instant data persistence without bloated third-party frameworks.
$('#employeeGrid').makeEditableTable({
editableModes: ['inline', 'bubble', 'row'],
enableAdd: true,
enableDelete: true,
columns: [ { data: 'salary', editType: 'number' } ]
});
Lightweight Gzipped Core
Inline, Bubble & Modal Row
Free & Open Source (MIT)
Works with Any REST Backend
Test It Live in Your Browser.
Click any cell to edit inline, toggle editing modes with the buttons below, or add and delete rows with real-time UI validation.
| ID | First Name | Last Name | Position | Office | Start Date | Salary |
|---|
Engineered for Clean Integration & Instant Data Flow.
Built from the ground up to solve the real frustrations developer teams face when turning static admin reports into live operational tools.
Click-to-Edit Inline
Users can double-click or focus directly on table cells to edit text, numbers, or dates instantly with auto-save on blur or enter keypress.
Bubble Popover Editor
Non-intrusive floating popover controls appear precisely over target fields, giving users quick dropdown selections without disturbing row layout.
Full-Row Modal Form
For complex datasets with dozens of attributes, trigger a responsive modal form to edit all properties in a clean, multi-column layout.
Add & Delete Records
Pre-built modal forms for adding new items and single or batch multi-row deletion with safety confirmation prompts.
Automatic Formatting
Format currency prefixes/suffixes, international date formats (ISO, US, EU), and dropdown options automatically via configuration.
REST API Sync Hooks
Tap into intuitive lifecycle callbacks (onUpdate, onDelete, onAdd) to sync changes directly with your backend database.
Drop-in Implementation in 5 Minutes.
No complex build tools, Webpack loaders, or heavy framework runtimes required. Simply link the script and call makeEditableTable() on your HTML table.
-
Zero Backend Assumptions: Compatible with PHP, Node.js, Python, Ruby, Go, Java, or ASP.NET backends.
-
Responsive on All Devices: Gracefully switches to horizontal scroll or modal cards on mobile viewports.
-
MIT Permissive License: Free to use, modify, and distribute in personal, academic, or commercial projects.
$('#myTable').makeEditableTable({
initialData: [
{ id: 1, name: 'John Doe', role: 'Dev', salary: 120000 },
{ id: 2, name: 'Jane Smith', role: 'Lead', salary: 145000 }
],
editableModes: ['inline', 'bubble', 'row'],
enableAdd: true,
enableDelete: true,
columns: [
{ data: 'id' },
{ data: 'name', editType: 'text' },
{ data: 'role', editType: 'select',
options: ['Dev', 'Lead', 'Designer', 'QA']
},
{ data: 'salary', editType: 'number',
format: { currency: '$', position: 'prefix' }
}
]
});Contribute, Fork, or Star on GitHub.
Join the developer community enhancing modern open-source web tooling. Star our repository or get in touch for custom enterprise grid implementations.