<nile-data-grid>

Data-driven table web component for the Nile Design System.

Installation

npm i @aquera/nile-data-grid

Requires @aquera/nile-elements (>= 1.7.0) as a peer dependency.

Usage

<script type="module">
  import '@aquera/nile-elements';
  import '@aquera/nile-data-grid/nile-data-grid';
</script>

<nile-data-grid hoverable sticky-header max-height="400px"></nile-data-grid>

const grid = document.querySelector('nile-data-grid');

grid.columns = [
  { id: 'id', header: 'ID', accessorKey: 'id', width: '80px' },
  { id: 'name', header: 'Name', accessorKey: 'name', enableSorting: true, enableFiltering: true },
  { id: 'role', header: 'Role', accessorKey: 'role' },
];

grid.data = [
  { id: 1, name: 'Ada Lovelace', role: 'Engineer' },
  { id: 2, name: 'Grace Hopper', role: 'Architect' },
];

data and columns are set as properties (not attributes). Cell/header renderers may return strings, numbers, or Lit html templates.

Features

• Sorting, per-column filtering, pagination
• Column resizing, drag reordering, pinning (left/right), show/hide
• Row selection, row drag reordering, editable select cells
• Sticky headers and pinned-column sticky headers (dual-axis scrolling)
• Row virtualization and infinite scroll (nile-scroll-end event)
• Cell spanning (nileSpanCell() / column rowSpan), header groups
• Loading skeleton, empty / no-match states
• Variants: default, sleek, sleek-condensed

Building

To compile the package to dist/, run

npm run build

To create the rollup bundle, run

npm run package

Tooling configs

For most of the tools, the configuration is in the package.json to reduce the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

Local Demo with web-dev-server

npm start

To run a local development server that serves the basic demo located in demo/index.html. The demo exercises every feature (sorting, filtering, pinning, virtualization, infinite scroll, row reordering, variants).

Release Notes

In this section, you can find the updates for each release of nile-data-grid. It's a good practice to maintain detailed release notes to help users and developers understand what changes have been made from one version to another and how these changes might affect their projects.

Version 0.9.4 (June 19, 2026)

• Nile Data Grid: Added row drag reordering (row-reordering attribute, nile-row-order-change event) (UIF-1273)

Version 0.9.3 (June 16, 2026)

• Nile Data Grid: Added pagination sub-properties pagination-variant, total-items, current-page and page-size for finer control over the pagination bar (UIF-1265)

Version 0.9.2 (June 10, 2026)

• Nile Data Grid: Exposed the full <nile-data-grid> property surface through <nile-chart> — every public grid property is forwarded when using type: 'grid'(UIF-1261)

Version 0.9.1 (June 05, 2026)

• Nile Data Grid: Token cleanup — enterprise (nile) tokens with NxtGen fallbacks across grid styles (UIF-1256)

Version 0.9.0 (May 26, 2026)

• Nile Data Grid: Added column drag and drop (UIF-1237)

Version 0.8.0 (May 25, 2026)

• Nile Data Grid: Added parts to nile-data-grid (UIF-1235)

Version 0.7.0 (May 23, 2026)

• Nile Data Grid: Added sticky-pinned-header (UIF-1234)

Version 0.6.0 (May 08, 2026)

• Nile Data Grid: Added sleek variant for a tighter, modern look (UIF-1219)
• Nile Data Grid: Added sleek-condensed variant for even denser row configurations (UIF-1219)
• Demo updated to showcase the new variants with appropriate data and styles
• CSS updated with new styling rules for the sleek variants

Version 0.5.0 (May 05, 2026)

• Nile Data Grid: Packaging and rollup bundle configuration fixes

Version 0.4.0 (April 27, 2026)

• Nile Data Grid: Added pagination (pagination-enabled, nile-pagination-change) (UIF-1201)
• Nile Data Grid: Added column resizing, pinning, visibility and ordering with corresponding nile-column-*-change events (UIF-1201)
• Nile Data Grid: Added row selection (type: 'checkbox' columns) and editable type: 'select' cells (nile-cell-change) (UIF-1201)
• Nile Data Grid: Added cell spanning via nileSpanCell() and header groups (UIF-1201)
• Demo expanded to cover the new features

Version 0.3.0 (April 20, 2026)

• Nile Data Grid: NxtGen design tokens applied across grid styles (colors, spacing, typography) (UIF-1193)
• Nile Data Grid: Added sticky-header support (UIF-1193)

Version 0.2.0 (April 17, 2026)

• Nile Data Grid: Font-family now resolves from design tokens (--nile-font-family-body / --ng-font-family-body) instead of a hardcoded serif stack

Version 0.1.0 (April 17, 2026)

• Nile Data Grid: New component @aquera/nile-data-grid with sorting and filtering capabilities (UIF-1189)
• Demo page showcasing sorting, filtering and loading states
• CSS style updates for improved visual presentation and responsiveness
• Build pipeline added in bitbucket-pipelines.yml for automated deployment to the UI CDN
• Publish script for pushing the data grid to the CDN and invalidating CloudFront