Need private packages and team management tools?Check out npm Orgs. »


2.0.17 • Public • Published

Ractive Ez Table

Table component for ractive.js



npm i ractive-ez-table
import 'ractive-ez-table';
import 'ractive-ez-table/themes/blue.less';

Requires less-loader.



This component contains the actual tabular data

    items="{{ items }}"
    columns="{{ columns }}"
    groups="{{ groups }}"
    sortColumn="{{ sortColumn }}"
    selectedItems="{{ selectedItems }}"
    on-dropitem="@this.onDropItem($1, $2)" />
  • items*: Array, the tabular data
  • columns*: Column definition
    • name*: unique name for the column
    • label*: Display name
    • path*: Item path to bind to this column
    • width*: Column width
    • isVisible: false if the column should be hidden
    • viewTemplate: Ractive template to use when viewing the item property
    • editTemplate: Ractive template to use when editing the item property
    • groupValueTemplate: Ractive template to use when grouping multiple items
    • groupLabelTemplate: Ractive template to use when grouping multiple items (defaults to "label: groupValueTemplate (count)")
  • groups: Array containing columns that are "grouped by". Should always contain items that are also in columns.
  • sortColumn: the column to sort on
  • selectedItems: Array containing all the items that are selected
  • selectionMode: single, multi, none
  • itemHeight: Height (in pixels) of a single row
  • labelHeight: Height (in pixels) of a group label
  • enableGrouping: If true, allow group by column
  • enableSorting: If true, allow sort by column
  • enableDragging: If true, allow rows to be dragged
  • enableDropping: If true, allow content to be dropped
  • enableVirtualization: If true, enable row virtualization (rows out of view will not be rendered to improve performance)
  • dataMapper: Used when dragging/dropping is enabled to handle drag data

Drag & Drop

In order to support basic drag & drop capabilities you need to define a dataMapper for every content type you wish to support.

new Ractive({
    data() {
        return {
            dataMapper: {
                "application/x-ez-ractive+user": {
                    parse: content => JSON.parse(content),
                    stringify: item => JSON.stringify(item)
                "application/x-ez-ractive+admin": {
                    parse: content => JSON.parse(content)
    onDropItem(data, droppedOnItem) {
        // droppedOnItem contains the item on which the data is dropped, or null if it has been dropped on the table in general
        if (data["application/x-ez-ractive+admin"]) {
            const admins = data["application/x-ez-ractive+admin"];
            // do something special with admins
        } else if (data["application/x-ez-ractive+user"]) {
            const users = data["application/x-ez-ractive+user"];
            this.push("items", users);

The data mapper is an object that provides a parse and/or stringify method for each content type to support.

  • parse: function that parses a content string and returns a parsed item. When omitted, items of this content type cannot be dropped on the table
  • stringify: function that stringifies an item. When omitted, items of this content type cannot be dragged from the table


Each table cell has a class name equal to the name of the column. You can use this class to select each cell of a column. For example:

.ez-table .ez-table-cell.age {
    text-align: right;
// only apply this style to the body, not the headers
.ez-table .body {
    font-weight: bold;


The current configuration of the table can be retrieved/updated via following methods:

  • EzTable#getConfiguration()
  • EzTable#setConfiguration(config)

Following configuration settings are saved:

  • Grouping
  • Visibility
  • Sort Direction
  • Sort Column

Table Controls

This component provides advanced controls for the table configuration.
Specifically, it allows drag & drop of columns to group by, and allows the user to show/hide specific columns.

    columns="{{ columns }}"
    groups="{{ groups }}"
    groupLabel="Drag columns here" />
  • columns: See <EzTable> component
  • groups: See <EzTable> component
  • groupLabel: Text to be displayed when no columns are grouped.


npm i ractive-ez-table

Downloadsweekly downloads









last publish


  • avatar
Report a vulnerability