Data Table

Introduction

Gjallarbrú is a data grid component built on top of TanStack Table (GitHub) and MRT (GitHub) with Bifrost components. It supports a wide array of powerful datagrid features including, but not limited to:

• Column
  • Hiding
  • Pinning
  • Reordering
  • Resizing
• Row Expansion
• Export
  • CSV
  • Excel
  • PDF
• Filtering
  • Column Filters
  • Global Filter
• Sorting
  • Multi-Column Sorting
• Pagination
  • Page Size Options
• Row Selection

It is also highly customizable and extensible aiming to fit any table use case.

It is easy to use, with sensible defaults and a simple column definition.

It is developed by Network Services Automation, and the code is in their monorepo. The component is published as a package in GitHub packages.

Install package

1. Run the following command to install (requires access to npm.intility.com):

npm install @intility/gjallarbru

2. Import component separately from other components

import { DataTable } from '@intility/gjallarbru'

3. Use it in your JSX code

<DataTable columns={columns} data={data} name='Cats' />

There are three required props, columns, data and name.

Name should be unique per table in your application, as it is used for storing user preferences (column order, hidden columns, compact mode etc.) in local storage.

Kitchen Sink

This example showcases most of the common features, it is used throughout the documentation as a default example, and referred to as the "Kitchen Sink" example.

Columns Definition

The columns definition is the core of any table, it defines what columns are in the table, how to access the data for each column, and what features each column should have.

The simplest column definition is just an array of objects with accessorKey and header properties:

const columns: Columns<Cat> = [
  {
    accessorKey: 'name',
    header: 'Name',
  },
]

If you're using TypeScript, you should type your column definition using Columns<TData> where TData is the type of your data rows:

import type { Columns } from '@intility/gjallarbru'

type Cat = {
  name: string
  age: number
}

const columns: Columns<Cat> = [
  {
    accessorKey: 'name',
    header: 'Name',
  },
  {
    accessorKey: 'age',
    filterVariant: 'select',
    header: 'Age',
  },
]

The data type could be an auto-generated DTO type from your backend API, or a manually defined type like in the example above.

Below you'll find the full columns definition used in the Kitchen Sink example above, it is also the basis for all examples throughout the docs.

It is meant to showcase a common set of features you might want to use in your own tables. In the feature specific documentation pages we will use simpler minimal examples with just one column definition to focus on the specific feature being documented.

Data Definition

You can access nested data using dot notation in the accessorKey property of your column definition.

Let's say breed was an object with name and origin properties instead of a simple string, you could access the breed name like this:

const data = [
  {
    name: 'Whiskers',
    breed: {
      name: 'Siamese',
      origin: 'Thailand',
    },
  },
  // more cats...
]

const columns: Columns<Cat> = [
  {
    accessorKey: 'breed.name',
    header: 'Breed',
  },
]

This works with any level of nesting, and the table gracefully handles missing keys in the nested structure.

If you have more complex data access needs, you can use the accessorFn property to provide a function that returns the value for the cell. In the Kitchen Sink example, Sex is stored as male or female, these values are not capitalized, so we use accessorFn to capitalize the value for display:

{
  accessorFn: row => capitalize(row.sex),
  header: 'Sex',
}

As you can see above, accessorFn receives the full row data as an argument, so you can access any part of the row to compute the value for the cell.

Below you'll find the full data definition used in the Kitchen Sink example above, it is also the basis for all examples throughout the docs. It uses Faker.js to generate data.