Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/torrobinson/jquery-editable-table
✏️ A small jQuery extension to turn a static HTML table into an editable one. For quickly populating a small table with JSON data, letting the user modify it with validation, and then getting JSON data back out.
https://github.com/torrobinson/jquery-editable-table
editable editable-grid editable-table jquery table
Last synced: 26 days ago
JSON representation
✏️ A small jQuery extension to turn a static HTML table into an editable one. For quickly populating a small table with JSON data, letting the user modify it with validation, and then getting JSON data back out.
- Host: GitHub
- URL: https://github.com/torrobinson/jquery-editable-table
- Owner: torrobinson
- Created: 2021-04-28T13:47:26.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2022-12-28T01:56:41.000Z (almost 2 years ago)
- Last Synced: 2023-03-11T21:21:00.833Z (almost 2 years ago)
- Topics: editable, editable-grid, editable-table, jquery, table
- Homepage:
- Size: 66.4 KB
- Stars: 8
- Watchers: 2
- Forks: 4
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# jquery-editable-table
A small jQuery extension to turn an HTML table editable for fast data entry and validation
# Demo
👉 https://jsfiddle.net/torrobinson/63z182vL/ 👈
---
# Config
```
{
columns: [], // required
actions: [] // optional
}
```
## columns
| Option | Type | Description |
|--------------------|-----------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------|
| index | int | The index of the column in the physical table |
| isHidden | bool | Whether or not to hide the column from being seen/edited |
| name | string | The name of the attribute bound to this column |
| maxLength | int | The max length allowed to input |
| classes | array | An array of CSS classes to assign to this column's cells |
| convertOut | function(internalValue) | A function to take an internal value (most likely a string) to format or cast it when the value is being extracted with `getData()` |
| isValid | function(newValue, allData) | A function to validate a new valid being added. Function provides all table data to compare against. |
| afterChange | function(newValue, cell) | A function that is executed after a cell value is changed (and validated). It provides the new value, as well as the physical table cell holding it. |
| removeRowIfCleared | bool | If true, when this cell value is cleared for a row, the entire row will be removed. |
## actions
| Option | Type | Description |
|--------------------|-----------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------|
| label | string | HTML for the button or icon for this action |
| action | function(clickEventArgs, row) | The action to perform when the button/icon is clicked
---
# Functions
| Function | Parameters | Description |
|----------|--------------|-------------------------------------------------------|
| getData | () | Returns all table data (array) |
| setData | (data array) | Accepts data (array) and sets the table to this state |
| addRow | (newRow) | Accepts an object and adds to the end of table data |
| clear | () | Clears all data from the table |
# Example...
```html
Unique Id
Number
```
```js
$('#sample-table').editableTable({
columns: [
// Example of a field that must be unique
{
index: 0,
name: 'id',
removeRowIfCleared: true,
isValid: (newVal, data) => {
// Ensure the id number is unique
let allIds = data.map(p => p.id);
return !allIds.includes(newVal);
}
},
// Example of a number that is validated as an int
{
index: 1,
name: 'number',
classes: ['text-end'],
isValid: (val) => {
val = parseInt(val);
return !isNaN(val) && Number.isInteger(val);
}
}
],
actions: [
{
label: 'Delete',
action: (e, row) => {
// Remove the row from the table
row.remove();
}
},
]
});
```