Lattice Grid Buy a licence

demo D181

The statistics panel in React

The column profile as a docked tool panel, following the filters

toolPanel: { panels: ['statistics'] }

This grid docks a statistics panel that profiles the selected column, count, range, mean and median, quartiles and spread, with a histogram, following the filters. It tells you what is actually in a column as you narrow it, without leaving the grid.

Building…
Loading a live grid…

This is the React version. The grid mounts through the createLatticeGrid adapter, which takes its configuration as ordinary props and hands back the live grid through a ref. The grid below is the same one every other tab runs.

The configuration

<link rel="stylesheet" href="https://cdn.latticegrid.dev/lattice-grid@1.107.0/lattice-grid.min.css">

<div id="grid"></div>

<script type="module">
  import React from 'https://esm.sh/react@18';
  import { createRoot } from 'https://esm.sh/react-dom@18/client';
  import { createGrid } from 'https://cdn.latticegrid.dev/lattice-grid@1.107.0/lattice-grid.esm.min.js';
  import createLatticeGrid from 'https://cdn.latticegrid.dev/lattice-grid@1.107.0/modules/react.esm.min.js';

  const LatticeGrid = createLatticeGrid({ React, createGrid });

  const columns = [
    { field: 'symbol', title: 'Symbol', layout: { pin: 'start', width: 120 } },
    { field: 'desk', title: 'Desk', filter: { type: 'set' } },
    { field: 'region', title: 'Region', filter: { type: 'set' } },
    { field: 'price', title: 'Price', type: 'number', format: { decimals: 4 } },
    { field: 'change', title: 'Change', type: 'number', format: { style: 'percent', decimals: 2 } },
    { field: 'volume', title: 'Volume', type: 'number', format: { notation: 'compact' } },
    { field: 'notional', title: 'Notional', type: 'number',
      format: { style: 'currency', currency: 'USD', decimals: 2 }, total: 'sum' },
  ];

  const rows = [/* trading book records */];

  function App() {
    return (
      <LatticeGrid
        rowKey="id"
        selection="multiple"
        // openPanel shows the statistics panel on load rather than on a click, so
        // the twelve figures and the shape of a column are the first thing seen.
        // Pick a column in the panel and every figure follows the filters.
        toolPanel={{ side: 'left', panels: ['columns', 'filters', 'statistics'], openPanel: 'statistics', exportName: 'book' }}
        columnDefaults={{ filter: true }}
        columns={columns}
        rows={rows}
        style={{ height: '540px' }}
      />
    );
  }

  createRoot(document.getElementById('grid')).render(<App />);
</script>

The shape of a column, without leaving the grid

Pick a column and the panel tells you what is in it: for a number, the count, the range, the mean and median, the quartiles and spread, and a histogram of the shape; for a text column, the distinct count and the top values, each with its count and its share of the rows. Every figure follows the filters, so narrowing the grid to one desk or one region reshapes the panel to match, and you read the column as it stands rather than as it shipped.

There are two ways in, for the two ways people work. Open the panel from the side dock and click through columns to survey the data. Or go straight to the column you are looking at: its header menu carries a Column statistics item that opens the panel already seeded on that column, so a question about one column is one click from its header rather than a hunt through a dock. Either way lands on the same panel with the same live figures.

How do I see statistics for a single column?

Open the column’s header menu and choose Column statistics: the statistics panel opens already focused on that column. For a numeric column it shows the count, minimum and maximum, mean and median, quartiles, spread and a histogram; for a categorical column it shows the distinct count and the top values with each value’s count and share. The figures are computed over the filtered rows, so they update as you filter. You can also open the panel from the side dock and pick a column there when you want to survey several.

Related demos