Simple and lightweight data grid in JS/HTML
This release introduces one major addition - selectable rows and keyboard shortcuts to manage selection.
Add {selectable: true}}
to Sensei Grid settings and rows will be made selectable. By default a checkbox is displayed per each row that can be used to toggle the selected state of a row. However a few keyboard shortcuts can be used instead of clicking, e.g., space
to toggle the current row. Use shift+up/down
to extend selection up or down (this will also select the current row). Press shift+a
to select/unselect all rows in one go. More info about keyboard shortcuts and a live demo can be found on the full demo page.
This release introduces two new features - column sorting events and option to skip a specific column on row duplication.
Enable sorting on a grid with an option {sortable: true}
passed to Sensei Grid instance. When enabled column headers will be clickable and on a click an icon will indicate the sorting order. Also an event will be fired: "column:sort". Use this event to sort and transform the data as needed. The data sorting itself is not implemented in Sensei Grid core, but a simple demo is provided in example.js file. The sorting implementation is left out of Sensei Grid because each use case requires a different implementation, for example, in some cases you would need to make an remote request for the sorted data, but in other cases a local sorting is just fine.
A row can be duplicated by pressing ctrl+d
or cmd+d
and until now all row data was cloned. A new option is added to configure which values should be left out when a row is duplicated. Pass {skipOnDuplicate: ["id", "foo", "bar"]}}
to Sensei Grid instance to define which columns should be omitted.
Usage examples can be found in example.js file.
This release brings a new feature - RowActions. Sensei Grid ships with two sample RowActions to demonstrate how to create and apply them. RowActions can be used to create buttons in the grid, for example, to create a "Delete" button. This is exactly what DeleteRowAction example shows. Currently there is no real documentation for the new functionality, but it is something we are aware of and will keep working on.
To get started, check out the examples found in sensei-row-actions.js file.
Click the image to go to live demo.
This release introduces a new event "row:save", made especially for saving rows as a whole.
More info here: Sensei Grid row saving
The biggest addition in this release is new row support and handling. This is implemented as an empty row at the end of table.
The empty row can be enabled/disabled via configuration setting: emptyRow: false
. By default the functionality is enabled.
This release consists mostly of more tests, particularly DOM event tests.
Read more in my blog - More testing [v0.1.2]
This release marks the end of core testing. Next release will deliver new functionality, especially new row support.
This is a minor release. Some of the changes include: more tests, especially for public data access API methods and value parsers that convert string values from table cells to corresponding data type when you access cells via data API, e.g. getCellData
.
JSHint is now enabled on source files and executed every time when project is being built and tested (locally or on Travis CI server).
Full changelist:
Sensei Grid is moving forward and is now available as bower package. Installation is really simple: bower install sensei-grid
. The project is still unstable, but we are moving forward to a stable release and hope to release it soon.