infinite-table / infinite-react Goto Github PK

Fixed in 0.2.11

We should allow using hooks inside those functions.

Implemented via the autoSizeColumnsKey

Changing pivotBy does not trigger a new data load. DataSourceFn is not called.

Should be a lot faster and a lot more stable

When rendering, if the grid’s set pageSize allows showing a number of rows smaller than the viewport, then grids should automatically know to call and get the nextPage to fill the remaining if more data exists.
The current property named onScrollToBottom is not being called if there is no scrollbar but there is more data available.

https://codesandbox.io/s/sandpack-project-forked-csv91?file=/src/App.tsx

pivoting by 3 values, or some combinations of two responds with 5xx; e.g. ‘country’ & ‘hobby’

Lacking support for Safari 14 due to.Invalid regular expression: invalid group specifier name

All pivot columns generated based on the aggregationReducers that have a field specified, now take all configurations from the respective initial columns that have the same field.

Additionally, an aggregation reducer can also specify a pivotColumn in order to further configure the generated pivot column, and this pivotColumn can have pivotColumn.inheritFromColumn, which can be used to specify that it should inherit properties from a specific column, if the default behavior is not desired

We need to add support for scrolling through entire remote datasets - the server will tell InfiniteTable the size of the dataset, and InfiniteTable needs to render all those rows, even they are not entirely loaded yet.

Version: 0.0.10

Starting from the pagination documentation sandbox , here is a sandbox to illustrate the issue:
https://codesandbox.io/s/events-for-sorting-and-pagination-ypyee?file=/src/App.tsx

When using sort & pagination at the same time, we have extra events which triggers fetching several times the same data.

When sorting, the onDataParamsChange is triggered with the current livePaginationCursor (which should be 0 instead) and it's called twice.

Also, this leads to another issue depending on the number of page that can be displayed. In the following screenshot, when sorting on country, it has not requested the next pages (and does not display the vertical scrollbar):

We now detect this and trigger data-fetching for group rows that are rendered as expanded but have no children loaded

The following columns should be displayed:

• a column for each groupBy
• a column for each aggregation

Fix by adding columnTypes as dependency to the column computation memo

Controls default column visibility when is used.

This property does not apply (work) when controlled is used, it only works with uncontrolled column visibility.

The value for this property can be one of the following:

• the '*' string - this means, the column is hidden whenever there are groups - so any groups.
• a string, namely a field from the bound type of the DataSource (so type is keyof DATA_TYPE) - the column is hidden whenever there is grouping that includes the specified field. The grouping can contain any other fields, but if it includes the specified field, the column is hidden.
• an object with keys of type keyof DATA_TYPE and values being true - whenever the grouping includes any of the fields that are in the keys of this object, the column is hidden.

When using lazy loaded data and on quickly vertical scroll, multiple requests are made for the same batch.

Infinite Table Header is rendered over react-select dropdown.
To fix this I've set the zIndex of the select component to a big number.

DataSourcePropGroupRowsBy, which was an export of @infinite-table/infinite-react should be DataSourcePropGroupBy

DataSourceGroupRowsBy, which was an export of @infinite-table/infinite-react should be DataSourceGroupBy

Sometimes, VSCode does suggest importing types from 'components/types/...' due to how types are published in our npm package.

This is an uncontrolled property, and does not apply when columnVisibility is controlled.
This prop makes the column hidden when the table has groupBy fields

See discussion started here #6

Shipped in 0.3.0

Discussed in #10

We need to implement column flex sizing, to behave similar to browser flex.

Example:

say infinite table is sized at 1000px and there are 3 columns:

• 1 fixed column with width: 400px - col A
• 1 flex column with flex: 2 - col B
• 1 flex column with flex: 1 - col C

Available flex size: 1000px - 400px = 600px.
Column sizes:

• col A - 400px
• col B - 400px
• col C - 200px

The flex algorithm will distribute space like this:
From the total available size, it will substract the fixed sizes: 1000px - 400px = 600px
It will sum up all flex values: 1+2 = 3
It will compute the width of a flex unit: 600px / 3 = 200px
It will distribute the flex space to every column, taking into account the flex value: col B = 2200px, col C = 1200px

version: 0.2.6

Steps to reproduce:

• On the documentation sample available here: https://infinite-table.com/docs/latest/learn/working-with-data/lazy-loading#server-side-pivoting-with-lazy-load
• scroll horizontally
• expand or collapse a group
• => data are not displayed anymore

Simply scroll again to see the data again

If columnSizing does not have an entry for group-by-<field> cols, take the value from <field> if one exists.

Maybe see if we can do this for other properties, not only columnSizing

From initial proposal in #11 :

Also, it would be great if, when we have groups and group-by- is not defined in columnSizing but is, then the group size could be set by default to the value given for the . This will allow to have only one definition (no matter if it's a group or not) and would be more convenient when the configuration of the groups are dynamic (as a user input for instance).

Switching from a "no pivot" configuration to a "pivot" configuration is working but not in the other way.

The following sandbox illustrates the issue

• the initial state is a "no pivot" configuration
• click on the button "1. Pivot": works as expected
• click on the button "2. No Pivot" that basically set the pivotBy to undefined: does not change the table status

https://codesandbox.io/s/infinite-table-pivot-no-pivot-switch-wb95t?file=/src/App.tsx

We need to have a way to manage column visibility - both controlled and uncontrolled

As detailed here #15 (comment) it will make things easier also in the scenario where users switch from one type of grouping to another

When using pivot configuration, there are some console.log that let us think there are errors: "cannot find column at index".

To reproduce and see the logs, fork the first example in the following documentation page and open the console to see the messages:
https://infinite-table.com/docs/latest/learn/grouping-and-pivoting/pivoting

For pivoting, it's useful to show grand total columns as well.

Grand total columns are columns that are generated for each aggregator. So they are not under column groups of pivot values, but rather correspond 1:1 to specified aggregators

Add support for this

const pivotBy = [
   {
     field: 'country',
     column: { width: 200}
   },
   {
     field: 'city',
     column: ({ column }) => {
         return ...
     }
   }
]
<DatasSource pivotBy={pivotBy} />

This is especially visible when there are 2-3 pivotby and aggregations, so many cols are being generated

This seems to be related to pinned columns as well, since those do not re-render properly - due to missing changes to the dataArray

See the discussion from #11 to find out more details

When changing hideEmptyGroupColumns from true to false at runtime, this is what's rendered

I am trying to style the grouped column.

The style object is added only when groupBy.column is a static object.
The following do not work.

groupBy: column: () ⇒ { style: () ⇒ ({ color: ‘red’ }) } // does not get applied 
groupBy: column: () ⇒ { style: { color: ‘red’ } } // does not get applied
groupBy: column: { style: { color: ‘red’ } } // works

When configuring only one pivot and the pivotTotalColumnPosition, the total column is not displayed.

sandbox: https://codesandbox.io/s/infinite-table-pivot-total-column-for-one-level-m3ioz?file=/src/App.tsx

Version: 0.0.8
Actual Result: Total column is not displayed
Expected Result: Total column should be displayed if configured with "start" or "end" value

When using pivot, the only groupRenderStrategy available is single-column, please add support for multi-column and inline strategies as well.

In the following code sandbox, inline mode has been set, the default group row state has been set to expand the first node. Notice the groups are displayed as a tree and the expanded node ("TypeScript") is not visible.
https://codesandbox.io/s/sandpack-project-forked-zgml8?file=/src/App.tsx

Relates to discussion here #19

InfiniteTableRowInfo can have different object shape depending on the presence or absence of grouping.

You can use dataSourceHasGrouping: boolean as a discriminator to determine the shape of the object, to know if the dataSource had grouping or not. Furthermore, for when the dataSource has grouping, you can use isGroupRow: boolean to discriminate between group rows vs normal rows.

Now rowInfo has the following props:

• childrenAvailable - if at least some of the children (for group rows with lazy batching) are available
• childrenLoading - if some children are loading
• selfLoaded - if the current row has been loaded (useful for bathing, when scrolling to the current row, when it's lazily fetched)
• dataSourceHasGrouping
• directChildrenCount - The count of the direct children of the current group. Direct children can be either normal rows or groups.
• directChildrenLoadedCount
• collapsedChildrenCount - The count of all leaf nodes (normal rows) inside the group that are not being visible due to collapsing (either the current row is collapsed or any of its children)
• deepRowInfoArray - This array contains all the (uncollapsed, so visible) row infos under this group, at any level of nesting, in the order in which they are visible in the table
• groupData - The array of all leaf nodes (normal rows) that are inside this group.
• collapsed