✏️ 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.

Overview

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...

 <table id="sample-table">
   <thead>
     <tr>
       <th>Unique Id</th>
       <th>Number</th>
     </tr>
   </thead>
   <tbody>
   </tbody>
</table>
$('#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: '<button>Delete</button>',
        action: (e, row) => {
        	 // Remove the row from the table
          row.remove();
        }
      },
    ]
});
Comments
  • Ill-formed markup in case of XHTML

    Ill-formed markup in case of XHTML

    The line element.find('thead tr').append($('<th actions></th>')); tries to insert markup which is ill-formed XML and causes an error if in an XHTML document. Should be actions="".

    bug 
    opened by ByteEater-pl 1
  • allow user to add configurable header & footer

    allow user to add configurable header & footer

    Here is an example for the extended header & footer configuration:

    {
                index: 2,
                header: 'Share (EUR)',
                headerClasses: ['editable-table-header', 'text-center'],
                footer: '0',
                footerClasses: ['editable-table-footer', 'text-center', 'no-editor', 'sum-result'],
                name: 'share_eur',
                classes: flatten(['text-center', 'sum-col', 'percent-partial-value-row', additionalClasses]),
                isValid: isValidFloat,
                afterAdd: (value, cell) => updateSums(table, tableElement, tableDataFieldId, value, cell),
                afterChange: (value, cell) => updateSums(table, tableElement, tableDataFieldId, value, cell),
                convertOut: convertToFloat,
    }
    

    I've added header, headerClasses, footer, footerClasses to be able to use a such dynamic configuration for header & footer.

    opened by avp90 0
  • afterLoad: allow user to execute some action after data is loaded

    afterLoad: allow user to execute some action after data is loaded

    allow user to execute some action after data is loaded e.g.

    setData: function(data, afterLoad) {
                if (data) {
                    this.clear();
                    data.forEach(entry => {
                        this.addRow(entry);
                    });
                    if (typeof afterLoad == 'function') afterLoad();
                }
            }
    
    opened by avp90 2
  • allow user to update cell value in afterChange

    allow user to update cell value in afterChange

    allow user to update cell value in updatedValue e.g.

            // Bind user-specified events if they exist
            if (typeof columnDef.afterChange == 'function') {
                let updatedValue = columnDef.afterChange(newValue, td);
                if (updatedValue) td.text(updatedValue);
            }
    
    opened by avp90 2
  • Add `validationErrorHandler(message)` to global config

    Add `validationErrorHandler(message)` to global config

    1. Make isValid assume that the result is === true to be considered valid
    2. Assume isValid returns a validation error message if validation failed
    3. Add validationErrorHandler(message) to the global config. This callback should be called with the results of isValid when it isValid() !== true explicitly.

    This allows the user to A) return custom validation messages per column, and B) display the exception in their own way (via toasts, custom labels, etc)

    opened by torrobinson 0
Owner
Tor
⌨️ Software Developer
Tor
Turn any dynamic website (especially wordpress) into a fast, secure, stable static site

Static site publisher Turn any dynamic website (especially wordpress) into a fast, secure, stable static site Reduced complexity - no need to run simp

Alex Ivkin 7 Apr 6, 2022
Table of contents Trilium widget for editable and readonly text notes.

Trilium-TocWidget Table of contents Trilium widget for editable and readonly text notes. Screenshot Features The ToC is live and automatically updated

Antonio Tejada 25 Dec 29, 2022
To Do list is a small but useful project to make list app , you can add tasks delete tasks and modify tasks, the project built using HTML, CSS, JavaScript

Project Name The To-Do-List app description this is a project in the second week of the second module in microverse. its a useful to do list that save

Alzubair Alqaraghuli 5 Jul 25, 2022
A util for getting data and metadata for all markdown files in a given dir. Useful for building static site generators

extract-md-data A util for getting data and metadata for all markdown files in a given dir. Useful for building static site generators. Usage Given th

Claire Froelich 2 Jan 6, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
Simple modern JavaScript ES6 library that fetches JSON data into an HTML table which displays nicely within a Bootstrap 4 Card.

Simple modern JavaScript ES6 library that fetches JSON data into an HTML table which displays nicely within a Bootstrap 4 Card. Uses simplenotsimpler/modern-table library.

SimpleNotSimpler 6 Feb 17, 2022
A POC of a Discord.js bot that sends 3D rendering instructions to a Go server through gRPC which responds with the image bytes which are then sent back on Discord.

A POC of a Discord.js bot that sends 3D rendering instructions to a Go server through gRPC which responds with the image bytes which are then sent back on Discord.

Henrique Corrêa 5 Jan 8, 2022
shell script replacement; write shell scripts in js instead of bash, then run them with a single static binary

yavascript YavaScript is a bash-like script runner which is distributed as a single statically-linked binary. Scripts are written in JavaScript. There

Lily Scott 59 Dec 29, 2022
Download all Moodle files with one click. This is a Chrome extension built to save time and effort from downloading files manually one by one!

Moodle Downloader Extension Moodle downloader extension for Chrome. The extension is tested with both the TUM moodle and the official moodle demo. Not

Zhongpin Wang 8 Nov 15, 2022
Turn an HTML input box to a duration picker, without jQuery

html-duration-picker.js html-duration-picker.js is a very tiny JS library used for transforming a native HTML text input into a duration picker. The a

Dan Chif 27 Oct 19, 2022
Javascript library to make HMTL tables editable, using Bootstrap

Donate to the project Bootstable Javascript library to make HMTL tables editable. "Bootstable" is a javascript library (plug-in), that lets convert a

Tito Hinostroza 59 Oct 30, 2022
Powerful interactive, editable to Do list. keep track of your activities

Project Name To do List Built With HTML CSS webpack Live Demo Live Demo Link Getting Started To get a local copy up and running follow these simple ex

Federico Luna 8 Sep 2, 2022
This is a basic app that allows user add/remove books from a list of books. It was created by using JavaScript arrays and objects to dynamically modify the DOM.

Awesome-Books This application lets you compile a dynamic collection of books using JavaScript. It is a single page app. You enter your book title & a

Jules Edozie 7 Oct 24, 2022
Modify Request & Response Headers Chrome Extension (Manifest V3)

Modify request & response headers (Chrome Extension Manifest V3) This Chrome extension will add request header and response header to few network requ

Requestly 6 Dec 9, 2022
✨ An IRL tokenization platform to turn your hopes, dreams, and desires into fundable NFTs on the Polygon blockchain using Chainlink, IPFS, Moralis, and NFT.Storage.

GoFundYourself Getting funding for your passion project, needs or dream doesn't have to be a nightmare! check out our live demo on Netlify Let's Fundi

Brian H. Hough | brianhuff.eth 7 Dec 6, 2022