API REFERENCE · DATA GRID PLUGINS

`@dojo-ng/data-grid-cell-components`

Custom cell content for <dj-data-grid>: a column can render any Lit content, such as a dj-button, a dj-icon, a dj-chip, or a sparkline.

Try it in the playground

@dojo-ng/data-grid-cell-components · v0.1.1 · A plugin for <dj-data-grid>, not a custom element

npm install @dojo-ng/data-grid-cell-components

Set render on a column for arbitrary Lit content, or use the prebuilt helpers. Action buttons emit dj-cell-action with the row.

<dj-data-grid id="g"></dj-data-grid>
<script type="module">
  import "@dojo-ng/data-grid";
  import { cellComponentsPlugin, actionButton, checkmarkCell } from "@dojo-ng/data-grid-cell-components";
  const g = document.getElementById("g");
  g.columns = [
    { id: "name", header: "Name" },
    { id: "active", header: "Active", sortable: false, render: checkmarkCell() },
    { id: "act", header: "", sortable: false, render: actionButton("Open", "open") },
  ];
  g.data = [{ name: "Widget", active: true }];
  g.plugins = [cellComponentsPlugin()];
  g.addEventListener("dj-cell-action", (e) => console.log(e.detail.action, e.detail.row));
</script>

Custom cells

Set render on a GridColumn. Columns without render are left to other plugins and the grid's default.

Ready-made cells

actionButton(label, action, opts?) renders a small dj-button. A click emits dj-cell-action with { action, row } from the grid, and does not also select the row.
checkmarkCell(opts?) renders a checkmark with hidden Yes or No text, so screen reader users also get the value.

Not supported yet

Keyboard access to controls inside a cell. Cell content can be used with a mouse or touch today; moving keyboard focus into a cell needs a change in the grid itself.

Need one of these? Make a request on Discord or add an issue (work item) on Heptapod.

Options it adds

Installing this plugin adds these members to its host's types.

Option	Type	Description
`GridColumn.render`	`CellRender`	Render arbitrary Lit content for this column's cells (dj-button, dj-icon, a chart…).

Events

These events bubble from the host element. The data is in event.detail.

`dj-cell-action`

{
  action: string;
  row: Row;
}

Functions

`actionButton`

function actionButton(label: string, action: string, opts?: ActionButtonOptions): CellRender;

`cellComponentsPlugin`

function cellComponentsPlugin(): DataGridPlugin;

`checkmarkCell`

function checkmarkCell(opts?: CheckmarkOptions): CellRender;

Types

`ActionButtonOptions`

interface ActionButtonOptions {
  kind?: "contained" | "outlined" | "text";
  icon?: TemplateResult | string;
  disabled?: (value: unknown, row: Row) => boolean;
}

`CellRender`

type CellRender = (value: unknown, row: Row, ctx: DataGridContext) => TemplateResult;

`CheckmarkOptions`

interface CheckmarkOptions {
  yes?: string;
  no?: string;
}