Lattice Grid Buy a licence

demo D18

Alignment

Left, right and centre, and why numbers default the way they do

align: 'left' | 'right' | 'center'

Building…
Loading a live grid…

The configuration

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.13.0/lattice-grid.min.css">
<script src="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.13.0/lattice-grid.min.js"></script>

<div id="grid" style="height: 540px"></div>

<script>
  const grid = LatticeGrid.createGrid(document.getElementById('grid'), {
    rowKey: 'id',
    columns: [
      { field: 'service', title: 'Left', cell: { align: 'start' } },
      { field: 'team', title: 'Centre', cell: { align: 'center' } },
      { field: 'region', title: 'Right', cell: { align: 'end' } },
      // Numbers align right without being told: a column of figures is read
      // by place value, so the digits have to line up.
      { field: 'instances', title: 'Instances', type: 'number' },
      { field: 'monthlyCost', title: 'Monthly cost', type: 'number', format: { style: 'currency', currency: 'USD' } },
    ],
    rows,  // 2,000 service records
  });
</script>

Setting column alignment so numbers read right and labels read left

Alignment controls where text sits inside a cell, and it is one of the settings a JavaScript data grid gets wrong most often when left to a browser’s default block layout, which left-aligns everything regardless of content. Lattice Grid sets this per column through align: 'left' | 'right' | 'center', applied to both the header cell and its body cells so the two stay in agreement when a column is resized or reordered. Numeric columns default to right alignment because right-aligned digits let a reader compare magnitude down a column at a glance, lining up units against units the way a ledger does; text columns default to left, matching how a reader’s eye tracks a line of prose. Centre alignment suits short, fixed-width content such as status icons, boolean flags or two-character codes, where there is no reading direction to preserve.

A developer reaches for an explicit align setting when a column’s data type does not match its natural alignment, such as a right-aligned column of formatted dates, or a centred column of currency values chosen for a dashboard’s visual rhythm. Alignment is a CSS text-align applied at render time rather than a value transform, so changing it never touches the underlying cell data, sort order or filter behaviour, and it carries no measurable cost against scroll performance across the grid’s virtualised, off-screen rows.

How do you right-align numbers in a JavaScript data grid?

Set align: 'right' on the column definition; Lattice Grid applies it to both the header and body cells for that column. Numeric columns take right alignment by default, so this setting matters most when overriding that default or when aligning a text or date column to match a number column beside it.

Related demos