Typewriter Ledger — Data grid combining a monospace font, taller rows, 2-row zebra striping with a custom stripe color, and custom bar and gradient colors.

Data grid of Category, Sales, Discount and Profit, sorted by Sub-Category.

Typewriter Ledger — Data grid combining a monospace font, taller rows, 2-row zebra striping with a custom stripe color, and custom bar and gradient colors.: Data grid of Category, Sales, Discount and Profit, sorted by Sub-Category.

Data

Programmatic variations on the Superstore retail sales dataset, showing the flexibility of Perspective's configuration: the same table re-queried as data grids, pivot tables and charts by changing only the viewer's JSON config.

Loaded from /data/superstore.lz4.arrow as arrow into the perspective-server engine.

Configuration

This example is a saved <perspective-viewer> workspace. Pass this JSON to viewer.restoreWorkspace() to reproduce it over the same table:

{
    "layout": {
        "type": "tab-layout",
        "tabs": [
            "p0"
        ],
        "selected": 0
    },
    "panels": {
        "p0": {
            "table": "",
            "title": "Typewriter Ledger",
            "plugin": "Datagrid",
            "columns": [
                "Category",
                "Sales",
                "Discount",
                "Profit",
                "Sub-Category",
                "Order Date"
            ],
            "plugin_config": {
                "font_family": "Courier New, monospace",
                "font_size": 15,
                "row_height": 32,
                "zebra_rows": 2,
                "zebra_color": "#666"
            },
            "columns_config": {
                "Sales": {
                    "fg_mode": "bar",
                    "fg_gradient": 2268,
                    "fg_color": "linear-gradient(to right, #b00020 0%, #0f9d58 100%)"
                },
                "Profit": {
                    "bg_mode": "gradient",
                    "bg_gradient": 600,
                    "bg_color": "linear-gradient(to right, #b00020 0%, #fdf1d6 50%, #0f9d58 100%)"
                },
                "Discount": {
                    "fg_color": "linear-gradient(to right, #7a5c00 0%, #1b5e20 100%)"
                }
            },
            "sort": [
                [
                    "Sub-Category",
                    "desc"
                ]
            ],
            "theme": null
        }
    },
    "active": "p0"
}

About Perspective

Perspective is an open-source, WebAssembly-powered data grid, pivot table and charting component for large, real-time and streaming datasets — in the browser, Python, Jupyter, Node.js and Rust.