Quarterly Update - Summer 2022
By adminยท
Over the summer, we continued our work on preparing for our official 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, including:
And we have updated some of the existing features:
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 over the summer:
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
(controlled) or defaultRowSelection
(uncontrolled) props, and listen to changes via the onRowSelectionChange
callback prop. Multi row checkbox selection with grouping
Find out more on 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.
All the functions that have the word
render
in their name will be called with an object that has a renderBag
property, which contains values that will be rendered.The default
columns.render
function (the last one in the pipeline) ends up rendering a few things:- a
value
- generally comes from thefield
the column is bound to - a
groupIcon
- for group columns - a
selectionCheckBox
- for columns that havecolumns.renderSelectionCheckBox
defined (combined with row selection)
When the rendering process starts for a column cell, all the above end up in the
renderBag
object.For example:
const column: InfiniteTableColumn<T> = { valueGetter: () => 'world', renderValue: ({ value, renderBag, rowInfo }) => { // at this stage, `value` is 'world' and `renderBag.value` has the same value, 'world' return <b>{value}</b>; }, render: ({ value, renderBag, rowInfo }) => { // at this stage `value` is 'world' // but `renderBag.value` is <b>world</b>, as this was the value returned by `renderValue` return <div>Hello {renderBag.value}!</div>
COPY
Find out more on column rendering
Read about how using the rendering pipeline helps your write less code.
Here is the full list of the functions in the rendering pipeline, in order of invocation:
1.
columns.valueGetter
- doesn't have access to renderBag
2.columns.valueFormatter
- doesn't have access to renderBag
3.columns.renderGroupIcon
- can use all properties in renderBag
4.columns.renderSelectionCheckBox
- can use all properties in renderBag
5.columns.renderValue
- can use all properties in renderBag
6.columns.renderGroupValue
- can use all properties in renderBag
7.columns.renderLeafValue
- can use all properties in renderBag
8.columns.render
- can use all properties in renderBag
Additionally, the
columns.components.ColumnCell
custom component has access to the renderBag
via useInfiniteColumnCell
Sortable Group Columns#
When
groupRenderStrategy="single-column"
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:const sortInfo = [{ field: ['stack', 'age'], dir: 1, id: 'group-by' }];
COPY
When
groupRenderStrategy="multi-column"
, 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, you can use the
columns.sortable
property 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.
Group column inherits style from related column
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
to specify how each grouping column should look for the respective field (in case ofgroupRenderStrateg="multi-column"
) - use
groupColumn
prop- can be used as an object - ideal for when you have simple requirements and when
groupRenderStrateg="single-column"
- as a function that returns a column configuration - can be used like this in either single or multiple group render strategy
- can be used as an object - ideal for when you have simple requirements and when
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
- this will make columns bound to the group fields be hidden when grouping is active - use
columns.defaultHiddenWhenGroupedBy
(also available on the column types, ascolumnTypes.defaultHiddenWhenGroupedBy
) - this is a column-level property, so you have more fine-grained control over what is hidden and when.
Valid values for
columns.defaultHiddenWhenGroupedBy
are:"*"
- when any grouping is active, hide the column that specifies this propertytrue
- when the field this column is bound to is used in grouping, hides this columnkeyof 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.
Hide columns when grouping
Group Columns Bound to a Field#
Group columns can now be bound to a field, by leveraging the (obviously ...)
columns.field
property. This will make the group column render the value of that field for non-group rows. Group columns with field
In addition, you can now use
columns.renderGroupValue
and columns.renderLeafValue
for configuring the rendered value for grouped vs non-grouped rows.Column valueGetter in Sorting#
Columns allow you to define a
valueGetter
to change the value they are rendering (e.g. useful when the DataSet
has nested objects).Previously, this value returned by
columns.valueGetter
was not used when sorting the table. With the latest update, the value returned by valueGetter
is correctly used when sorting the grid locally.