usfca-data-table v0.1.0
A lightweight HTML+JS library for inputting two-dimensional form data
See this project at https://brmighell.github.io/rcv-entry/
A lightweight, extendable, dependency-free javascript HTML table plugin
The default configuration:
Features & Benefits
Features:
- Customisable labels
- Customisable layout
- Customise column rendering
- Has option to disable any input type for any cell
- Has option to change values for any input type at any cell
- Callback informs RCVis of the updates
Benefits:
- Vanilla Javascript & CSS
- No external libraries: no jQuery, bootstrap, Sass, etc
- Simple javascript configuration with sane defaults
- Simple, easy-to-override CSS
- Permissive license
Examples
#1: Default
#2: Fruit Example
Usage
API: Vanilla Javascript
If you're not using node.js, functions begin with dt namespace to avoid conflicts:
Include the files in your HTML and create a wrapper div:
<link rel="stylesheet" href="table.css">
<script type="text/javascript" src="table.js"></script>
<div id="table"></div>Create a table by calling:
const config = {wrapperDivId: 'div'}
dtCreateDataTable(config);additional config options are described below.
Callbacks and data validation
Each field can optionally trigger a callback when it is edited.
Callback functions should return null or nothing (undefined) if there is no error, and return an error message (string) if there is an error.
Configuration options
The config dictionary has the following options:
| key/default | description |
|---|---|
wrapperDivId* required | The div id in which to create the data table. |
numRows default: 3 | Number of rows in the table. |
numColumns default: 4 | Number of columns in the table. |
rowsName default: Row | Name of rows in the table. |
columnsName default: Column | Name of columns in the table. |
canEditRowHeader default: true | Make the row headers an input field? |
canEditColumnHeader default: false | Make the column headers an input field? |
names default: ["Value", "Status"] | Array of the names for all fields in a cell. |
types default: [Number, Array] | Array of the types for all fields in a cell. |
values default: [0, ["Active", "Inactive"]] | Array of the types for all fields in a cell. |
callbacks default: "None" | Tells what function to execute when a field is changed. |
CSS configuration
All CSS styles begin with dt_ and can be overridden with your own custom CSS.
See data-table/table.css for some of the options that may be overridden.
Additional, unstyled classes are also set on several elements, though these are undocumented.