komarovalexander / ka-table

Lightweight MIT React Table component with Sorting, Filtering, Grouping, Virtualization, Editing and many more

Home Page:http://ka-table.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Accessing current row count on grouped and filterable table

ceessay opened this issue · comments

Hi thanks very much for the work. This library is hands down the best table library out there.
My colleagues and I are in awe and grateful for the thoughtfulness.

We have a use case where we have a grouped and filterable (header filter) tables.

Is there is a way to access the updated row count of each group when filtering changes ? We need to display that row count

My apologies if the is not the place to post question. Please, if needed, kindly redirect me to the questions page

Hi @ceessay do you need to show that length in grouping summary: https://komarovalexander.github.io/ka-table/#/grouping-summary ?
there is a demo how to do that for filtered values: https://stackblitz.com/edit/table-grouping-summary-ts-khj3mx?file=Demo.tsx

I do need to show the length, but in the grouping header instead of grouping the summary

image

The groupData is not available in the groupCell chidComponent in the current version of the Table.
At this time you can use this workaround:

      childComponents={{
        groupCell: {
          content: (props) => {
            switch (props.column.key) {
              case 'country':
                const visibleData = kaPropsUtils.getData(tableProps);
                const filteredData = visibleData.filter(
                  (x) => x[props.column.key] === props.groupKey[0]
                );
                return `${props.text} - length: ${filteredData.length}`;
            }
          },
        },
      }}

link to example https://stackblitz.com/edit/table-grouping-summary-ts-mzq1zw?file=Demo.tsx

This is exactly what I needed! Thanks for the help

Closing for now as there is a workaround. Will wait for further requests to make it out of the box