See this project at [https://brmighell.github.io/rcv-entry/]
The default configuration:
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
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.
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.
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. |
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.