usfca-data-table

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.