Views

A View represents everything that is visible at a given time in Infinite Table.

Each View can include a large number of different elements including:

visible columns
Calculated Columns
current row grouping, sorting, pivoting and aggregations
Filtering - both Column Filters and the Grid Filter
Styled Cells
Flashing Cells

Configuring Views

Views are configured via the view property in the default State.

Caution

This property is mandatory - Developers must always provide at least one view in the state

defaultState = {
  // configure Views here
  view: {
    currentViewId: 'myView',
    views: [
      {
        id: 'myView',
        label: 'My View',
        columns: [
          {
            id: 'full_name',
          },
          {
            id: 'description',
          },
        ],
      },
    ],
  },
};

Note

Each view needs to have an id property (this property is referenced in state.view.currentViewId to make it the active view)
Additionally, views can also have a label property, which is a human readable name for the view
If no label is provided, the id property value will be used as the view label.

Active View

At any given time, there will be an active View, which is configured via state.view.currentViewId.

Types of Views

AdapTable provides 2 types of Views:

Table Views - show columns in standard tabular format (with row grouping if required)
Pivot Views - display data in pivoted, aggregated format

Each view is either a Table View or a Pivot View.

Note

Once defined or created, a Table View cannot be changed to be a Pivot View (or vice versa)

Columns

The most important element of a view is the columns property.

Configuring columns

Each column is an object which references one of the columns made available to the component via state.globalEntities.availableColumns.

Defining a basic view

import { type AdaptableColDef } from '@adaptabletools/adaptable-infinite-react';

// This example will show a table of JavaScript Web frameworks
const availableColumns: Record<string, AdaptableColDef> = {
  id: { field: 'id', dataType: 'number' },
  name: { field: 'name', label: 'Name', dataType: 'text' },
  language: { field: 'language', dataType: 'text' },
  license: { field: 'license', dataType: 'text' },
  stars: {
    field: 'github_stars', editable: true, dataType: 'number'
  },
  '2xstars': { expression: '[stars] * 2', dataType: 'number' }
};

<Adaptable.Provider
  primaryKey="id"
  adaptableId="Adaptable View Demo"
  data={[...]}
  defaultState={{
    view: {
      currentViewId: 'tableView',
      views: [
        {
          id: 'tableView', label: 'Table View',
          columns: [
            { id: 'name' }, // reference the `name` column
            { id: 'stars', editable: false },
            { id: 'language' },
          ],
        }
      ]
    },
    globalEntities: {
      availableColumns,
    },
  }}
>
</Adaptable.Provider>

Example configured with a table and a grouped view

Fork Fork

Open Sandbox

Defining available columns

The state contains some global objects (or entities, as we call them) that are made available to all views so they can be used everywhere. Columns are such an entity and they need to be mentioned in state.globalEntities.availableColumns before being referenced in views.

The state.globalEntities.availableColumns is an object keyed by the column id and the values are column definitions.

Let's take an example:

Defining available columns

import { type AdaptableColDef } from '@adaptabletools/adaptable-infinite-react';

const availableColumns: Record<string, AdaptableColDef> = {
  name: { field: 'name', label: 'Name', dataType: 'text' },
  language: { field: 'language', dataType: 'text' },
  license: { field: 'license', dataType: 'text' },
  stars: {
    field: 'github_stars',
    editable: true,
    dataType: 'number',
  },
  '2xstars': { expression: '[stars] * 2', dataType: 'number' },
};

The columns here are not listed in any specific order, since this is the definition of the columns - the column visibility and order will be defined in a view.

There are two major types of columns:

value columns - which have their field bound to a property in the data object or have a valueGetter function defined
calculated columns - which have their expression property configured

Note

Calculated columns are columns which have their value computed using an AdaptableQL expression. The expression allows you to reference existing columns and perform operations (eg: [stars] * 2).

Please note that the [colId] notation references column ids, not data fields from the data rows.

Deep Dive

Read about Column Properties

All the properties listed below are available in the column definition:

dataType (mandatory) - one of 'number' | 'text' | 'boolean' | 'date' | 'array'
field - the name of the property in the data object
valueGetter - ({ data }) => any - a value getter function for the column
expression - the AdaptableQL expression used to calculate the column value.

A column needs to have a dataType and at least one of the field, valueGetter or expression properties defined. The above properties cannot be overriden in a column reference (ie. when columns are listed in the view.columns property) as they are core to what the column actually is.

The properties listed below are available in both column definitions and column references:

aggregation - one of
- for dataType = number
  - sum
  - avg
  - min
  - max
  - count
  - distinct
- for dataType = text
  - count
  - distinct
- false is also a valid value - useful when the column definition has an aggregation but you want to override that when you reference the column in the view.
aggregatable - boolean - if this column can be aggregated
checkboxSelection - boolean - whether to show a checkbox for selection in this column (only works if row selection is enabled)
columnType - string | string[] | null - a column type (column types can be used for giving more columns a common set of properties; can also be used for simply "tagging" columns)
components - object - an object with custom components for the column. See Infinite Table column components for the supported components.
editable - boolean - if this column has editing enabled
exportable - boolean - if this column will show up in exported data
filterable - boolean - if this column can be filtered
flex - number - a flex value for the column (works similarly to the flex CSS property) - this will make the column grow or shrink depending on available space. If not specified, the column will not be flexed but have a fixed width.
label - string - a label for the column. If not specified, the column id will be used.
maxWidth - number - the maximum width of the column
minWidth - number - the minimum width of the column
pivotable - boolean - if this column can be pivoted by
renderValue - () => ReactNode - a custom renderer for the column value - see Infinite Table column renderValue for details
renderHeader - () => ReactNode - a custom renderer for the column header - see Infinite Table column renderHeader for details
rowGroupable - boolean - if this column can be used for row grouping
sortable - boolean - if this column can be sorted
visible - boolean - if this column is visible by default
width - number - the initial width of the column

Note

Besides the dataType, and field/valueGetter/expression properties (at least one of those 3 needs to be defined), all other properties are optional and also they can be overriden in the view column references.

Using column references in `view.columns`

After the columns have been declared in state.globalEntities.availableColumns, they can be referenced in views.

Referencing columns in views

defaultState = {
  view: {
    currentViewId: 'myView',
    views: [
      {
        id: 'myView',
        label: 'My View',
        columns: [
          { id: 'name' },
          { id: 'language' },
          { id: 'license' },
          { id: 'id', visible: false },
          { id: 'stars', editable: false },
        ],
      },
    ],
  },
};

The only mandatory property in a column reference inside a view is the id - which points back to the respective column in state.globalEntities.availableColumns.

When referencing a column, you can override all of the non-mandatory properties from the column definition.

Using row grouping in views

A table view can be configured to have row grouping and the grouping can be added/removed/edited at runtime by end-users (if the permissions are configured to allow it, which is the default).

Defining a view with grouping - two group columns configured

defaultState = {
  view: {
    currentViewId: 'firstView',
    views: [
      {
        id: 'firstView',
        label: 'My View',
        columns: [
          { id: 'group-by-language', groupBy: 'language'}
          { id: 'group-by-license', groupBy: 'license'}
          { id: 'name', },
          { id: 'license' },
          { id: 'stars', editable: false }
        ],
      },
    ],
  },
};

Note

The id of the group column doesn't need to reference an existing column definition - but make sure it's still unique in the view.

Besides that, a group column is defined like any other column in the view, but it has the groupBy property configured.

The column groupBy can be either a string or a string[] (the value(s) in the groupBy needs to reference an existing column in the state.globalEntities.availableColumns ).

if the groupBy is a string, the group column will render the grouping values for that column (you can have more than one group column with groupBy set to a string).
if the groupBy is a string[], the group column will render the grouping values for all the specified columns (you can only have one group column with groupBy set to a string[]).

Defining a view with grouping - one group column configured, but groups by 2 fields

defaultState = {
  view: {
    currentViewId: 'firstView',
    views: [
      {
        id: 'firstView',
        label: 'My View',
        columns: [
          { id: 'group', groupBy: ['language','license'] }
          { id: 'name', },
          { id: 'license' },
          { id: 'stars', editable: false }
        ],
      },
    ],
  },
};

Grouping by 2 fields, but rendering the grouping with either one or two columns

Fork Fork

Open Sandbox

PreviousManaging Data NextTable Views

Views

Configuring Views

Caution

Note

Active View

Types of Views

Note

Columns

Configuring columns

Defining available columns

Note

Deep Dive

Read about Column Properties

Note

Using column references in view.columns

Using row grouping in views

Note

Using column references in `view.columns`