Home

Use biggus-griddus to display very large tables of data in a browser.

Features include:

• Flexible styling and presentation
• Sorting
• Filtering
• Super-fast scrolling through tens-of-thousands of elements

---

Example

Imagine you want to display a table of orders.

An order might resemble:

var order = { id: "order-1", item: { name: "Apple", price: 1.23 }, quantity: 100 };

To create a table that shows such orders, you could use:

var columns = [
    new biggus.TextColumn({ title: "Item", path: "item.name" }),
    new biggus.NumericColumn({ title: "Unit Price", path: "item.price" }),
    new biggus.NumericColumn({ title: "Quantity", path: "quantity" })
];

var source = new biggus.DataSource(function(order) { return order.id; });
var table = document.querySelector('table#orders');
var grid = new biggus.Grid(source, table, { columns: columns });

That's it!

---

Customisation

Row and cell customisation is performed using CSS.

Row styling

You can provide a callback function that computes a CSS class name to be applied to a row based upon the data item.

For example, assume our orders have a status property with a suitable string value. You could use this value in a CSS class that is applied to the <tr> element as follows:

var grid = new biggus.Grid(source, table, {
    columns: columns,
    rowClassName: function(order) { return "order-" + order.status; }
});

Cell styling

You may provide a callback on a per-column basis that will be called when a row is bound to a cell in that column.

For example, imagine we wanted to highlight the quantity column for orders having a quantity greater than ten:

var columns = [
    // ...
    new biggus.NumericColumn({
        title: "Quantity",
        path: "quantity",
        tdStyle: function(td, order) {
            if (order.quantity > 10)
                td.classList.add('big-order');
        }
    })
];

You can then set up a CSS rule to apply whatever style you wish. Let's make the text bold white on a red background:

td.big-order { color: white; font-weight: bold; background-color: red; }

---

Computed columns

Say you wish to add a column that displays the total cost of the order, which is computed by multiplying the order quantity by the item's unit price. In our column array, add a column that specifies a value callback:

var columns = [
    // ...
    new biggus.NumericColumn({
        title: "Total Cost",
        value: function(order) { return order.quantity * order.item.price; }
    })
];

Here we use NumericColumn, but the same is possible with TextColumn too.

---

This is just a quick overview of the basic features of biggus-griddus. Check out the demo and dive into the code and discover what else is possible.