Infinite Table Monthly Update - August 2022
Published: 2022-09-06 11:23:41

At [Infinite Table](https://infinite-table.com), we continued our work on preparing for our Autumn release,  focusing mainly on adding new functionalities and documenting them thoroughly, together with enhancements to existing features.


## Summary 

We have implemented a few new functionalities:

 * [row selection is now available](#row-selection)
 * [column rendering pipeline](#column-rendering-pipeline)
 * [group columns are now sortable](#sortable-group-columns)
 

And we have updated some of the existing features:

 * [group columns inherit](#enhanced-group-columns) styles and configuration
 * [column hiding when grouping](#column-hiding-when-grouping)
 * [group columns can be bound to a field](#group-columns-bound-to-a-field)
 * [using the column valueGetter in sorting](#column-valuegetter-in-sorting)
 
## Coming soon

We started working on column and context menus.
We will first release fully customizable **column** menus to show/hide columns and to easily perform other operations on columns.
This will be followed by **context** menus where you will be able to define your own custom actions on rows/cells in the table.

---

Don't worry, the menus will be fully customizable, the menu items are fully replaceable with whatever you need, or you will be able to swap our menu component with a custom one of your own.



## New Features

Here's what we shipped in the month of August:

### Row Selection

Row selection can be single or multiple, with or without a checkbox, with or without grouping and for a lazy or non-lazy `DataSource` - 😅 that was a long enumeration, but seriously, we think we got something great out there.

You can specify the selection via the [rowSelection](https://infinite-table.com/docs/latest/reference/datasource-props#rowSelection) (controlled) or [defaultRowSelection](https://infinite-table.com/docs/latest/reference/datasource-props#defaultRowSelection) (uncontrolled) props, and listen to changes via the [onRowSelectionChange](https://infinite-table.com/docs/latest/reference/datasource-props#onRowSelectionChange) callback prop.


This example shows how you can use multiple row selection with a predefined controlled value.

Go ahead and select some groups/rows and see the selection value adjust.

The example also shows how you can use the [InfiniteTableApi](https://infinite-table.com/docs/latest/reference/api) to retrieve the actual ids of the selected rows.

{% embed https://codesandbox.io/embed/sandpack-project-cdx0yh?fontsize=14&hidenavigation=1&theme=dark %}


[Find out more on row selection](https://infinite-table.com/docs/latest/learn/selection/row-selection) - single vs multiple selection, grouped or ungrouped data, checkbox selection, lazy selection - read about all the possible combinations you can use to fit your needs.


### Column Rendering Pipeline

The rendering pipeline for columns is a series of functions defined on the column that are called while rendering.

Most of those functions existed even before, but piping the return values from one to the other was not available. We think this is a big deal and opens up lots of use-cases.

All the columns that have `render` in their name, will be called with an object that has a `renderBag` property on it, which contains the values that the previous function in the pipeline returned.


For example:

```tsx
const column: InfiniteTableColumn<T> = {
  valueGetter: ({ data, field }) => {
    return data[field] * 10
  },
  renderValue: ({ value, renderBag })=> {
    // accessing `value` here would give us the result from `data[field]`
    // but using `renderBag.value` would give us `data[field] * 10`, 
    // namely the result of the previous function in the pipeline
  }
}
```

Second example:

```tsx
const column: InfiniteTableColumn<T> = {
  renderGroupIcon: ({ renderBag }) => {
    // we can use `renderBag.groupIcon` to have access to the default group icon and decorate it
    return <b style={{ padding: 10 }}>
      {renderBag.groupIcon}
    </b>
  },

  render: ({ renderBag })=> {
    // allows you to fully customize the end-result
    <>
      {renderBag.value}
      {renderBag.groupIcon}
      {renderBag.selectionCheckBox}
    </>
  }
}
```

These are all the properties available in the `renderBag` object:

 * `value`
 * `groupIcon`
 * `selectionCheckBox`

Here is the full list of the functions in the rendering pipeline, in order of invocation:

1. [columns.valueGetter](https://infinite-table.com/docs/latest/reference#columns.valueGetter) - doesn't have access to `renderBag`
2. [columns.valueFormatter](https://infinite-table.com/docs/latest/reference#columns.valueFormatter) - doesn't have access to `renderBag`
3. [columns.renderGroupIcon](https://infinite-table.com/docs/latest/reference#columns.renderGroupIcon) - can use all properties in `renderBag`
4. [columns.renderSelectionCheckBox](https://infinite-table.com/docs/latest/reference#columns.renderSelectionCheckBox) - can use all properties in `renderBag`
5. [columns.renderValue](https://infinite-table.com/docs/latest/reference#columns.renderValue) - can use all properties in `renderBag`
6. [columns.renderGroupValue](https://infinite-table.com/docs/latest/reference#columns.renderGroupValue) - can use all properties in `renderBag`
7. [columns.renderLeafValue](https://infinite-table.com/docs/latest/reference#columns.renderLeafValue) - can use all properties in `renderBag`
8. [columns.render](https://infinite-table.com/docs/latest/reference#columns.render) - can use all properties in `renderBag`.

Additionally, the[columns.components.ColumnCell](https://infinite-table.com/docs/latest/reference#columns.components.ColumnCell) custom component has access to the `renderBag` via [useInfiniteColumnCell](https://infinite-table.com/docs/latest/reference/hooks#useInfiniteColumnCell)

### Sortable Group Columns

When [groupRenderStrategy](https://infinite-table.com/docs/latest/reference#groupRenderStrategy) is used, the group column is sortable by default if all the columns that are involved in grouping are sortable.

Sorting the group column makes the `sortInfo` have a value that looks like this:


```ts
const sortInfo = [
  { field: ['stack','age'], dir: 1, id: 'group-by', }
]
```

When [groupRenderStrategy="multi-column"](https://infinite-table.com/docs/latest/reference#groupRenderStrategy), each group column is sortable by default if the column with the corresponding field is sortable.

In both single and multi group column render strategy, the [columns.sortable](https://infinite-table.com/docs/latest/reference#columns.sortable) property can be used to override the default behavior.


## Updated Features

Here’s a list of Infinite Table functionalities that we enhanced in the last month:


### Enhanced Group Columns

Group columns now inherit configuration from the columns bound to the field they are grouped by - if such columns exist.


In this example, the group column inherits the styling of the `country` column, because the `country` field is used for grouping.

{% embed https://codesandbox.io/embed/sandpack-project-ybml8s?fontsize=14&hidenavigation=1&theme=dark %}


The generated group column(s) - can be one for all groups or one for each group - will inherit the `style`/`className`/renderers from the columns corresponding to the group fields themselves (if those columns exist).

Additionally, there are other ways to override those inherited configurations, in order to configure the group columns:
 * use [groupBy.column](https://infinite-table.com/docs/latest/reference/datasource-props#groupBy) to specify how each grouping column should look for the respective field (in case of [groupRenderStrateg="multi-column"](https://infinite-table.com/docs/latest/reference#groupRenderStrategy)
 * use [groupColumn](https://infinite-table.com/docs/latest/reference#groupColumn) prop 
    * can be used as an object - ideal for when you have simple requirements and when [groupRenderStrateg="single-column"](https://infinite-table.com/docs/latest/reference#groupRenderStrategy)
    * as a function that returns a column configuration - can be used like this in either single or multiple group render strategy


### Column Hiding when Grouping

When grouping is enabled, you can choose to hide some columns. Here are the two main ways to do this:

 * use [hideColumnWhenGrouped](https://infinite-table.com/docs/latest/reference#hideColumnWhenGrouped) - this will make columns bound to the group fields be hidden when grouping is active
 * use [columns.defaultHiddenWhenGroupedBy](https://infinite-table.com/docs/latest/reference#columns.defaultHiddenWhenGroupedBy) (also available on the column types, as [columnTypes.defaultHiddenWhenGroupedBy](https://infinite-table.com/docs/latest/reference#columnTypes)) - this is a column-level property, so you have more fine-grained control over what is hidden and when.

Valid values for [columns.defaultHiddenWhenGroupedBy](https://infinite-table.com/docs/latest/reference#columns.defaultHiddenWhenGroupedBy) are:

 * `"*"` - when any grouping is active, hide the column that specifies this property
 * `true` - when the field this column is bound to is used in grouping, hides this column
 * `keyof DATA_TYPE` - specify an exact field that, when grouped by, makes this column be hidden
 * `{[k in keyof DATA_TYPE]: true}` - an object that can specify more fields. When there is grouping by any of those fields, the current column gets hidden.

 
In this example, the column bound to `firstName` field is set to hide when any grouping is active, since the group column is anyways found to the `firstName` field.

In addition, [hideColumnWhenGrouped](https://infinite-table.com/docs/latest/reference#hideColumnWhenGrouped) is set to `true`, so the `stack` and `preferredLanguage` columns are also hidden, since they are grouped by.


{% embed https://codesandbox.io/embed/sandpack-project-d41t32?fontsize=14&hidenavigation=1&theme=dark %}

### Group Columns Bound to a Field 

Group columns can now be bound to a field, by leveraging the (obviously ...) <PropLink name="columns.field" /> property. This will make the group column render the value of that field for non-group rows.


{% embed https://codesandbox.io/embed/sandpack-project-ni8xs0?fontsize=14&hidenavigation=1&theme=dark %}

In addition, you can now use [columns.renderGroupValue](https://infinite-table.com/docs/latest/reference#columns.renderGroupValue) and [columns.renderLeafValue](https://infinite-table.com/docs/latest/reference#columns.renderLeafValue) for configuring the rendered value for grouped vs non-grouped rows.


### Column valueGetter in Sorting

Columns allow you to define a [columns.valueGetter](https://infinite-table.com/docs/latest/reference#columns.valueGetter) to change the value they are rendering (eg: when the `DataSet` has nested objects). Previously, this value returned by [columns.valueGetter](https://infinite-table.com/docs/latest/reference#columns.valueGetter) was not used when sorting the table. With the latest updated, the value returned by `valueGetter` is correctly used when sorting the grid locally.