Skip to content
DzGrid

badge

A cell part that draws a status as a small label in a frame, coloured by its tone.

Importimport { badge } from '@dzgrid/dom/parts';
Signaturebadge(o?: BadgeOptions): SlotPart<"cell">
Textsimport { EN_PARTS } from '@dzgrid/dom/locales/en-parts';
languages: en, fr, ar
Declared inpackages/dom/src/parts/badge.ts
OptionsType
tonesReadonly<Record<string, Tone>>
fallbackTone
classesReadonly<Partial<Record<Tone, string>>>

What it does

Section titled “What it does”

badge() from @dzgrid/dom/parts is not a feature: it returns a cell part. Register it under a name of your own in the parts setting, and name it in a column’s ui.cell. The label is the cell’s text (an enum column’s label; an unknown value shows the value). The tone comes from tones, by the value as a string, else fallback. A blank value shows nothing.

Five tones: neutral, info, success, warning, danger. Besides the colour, each tone but neutral has a small shape before the label (✓, i, !, ✕), so colour is never the only sign. A screen reader reads the label only. Sorting, filters, quick search and files treat the column as plain text. One badge() per mapping; several columns may share one name.

badge itself needs no texts. The -parts bundle shown above is for cellBoolean, from the same entry.

Options

Section titled “Options”
  • tones: the tone of each value, by the value as a string: { done: 'success', late: 'danger' }.
  • fallback: the tone of a value tones does not name. By default neutral.
  • classes: your classes per tone, put beside the badge’s own: { danger: 'bg-red-100 text-red-800' }. The tone’s shape stays.

Example

Section titled “Example”
import { createGrid } from '@dzgrid/dom';
import { badge } from '@dzgrid/dom/parts';
import { EN } from '@dzgrid/dom/locales/en';


type Batch = { id: string; fruit: string; state: string };


createGrid<Batch>(document.getElementById('batches')!, {
  rows: [
    { id: 'b1', fruit: 'Apricots', state: 'ripe' },
    { id: 'b2', fruit: 'Figs', state: 'spoilt' },
  ],
  columns: [
    { id: 'fruit', header: 'Fruit' },
    {
      id: 'state', header: 'State', type: 'enum', ui: { cell: 'stateBadge' },
      enumOptions: [{ value: 'ripe', label: 'Ripe' }, { value: 'green', label: 'Not ripe yet' }, { value: 'spoilt', label: 'Spoilt' }],
    },
  ],
  getRowId: (b) => b.id,
  messages: EN,
  parts: { stateBadge: badge({ tones: { ripe: 'success', green: 'info', spoilt: 'danger' } }) },
});

See also

Section titled “See also”