komarovalexander / ka-table

Lightweight MIT React Table component with Sorting, Filtering, Grouping, Virtualization, Editing and many more
http://ka-table.com
MIT License
788 stars 58 forks source link

Show summary in footer #348

Closed amcurative closed 1 year ago

amcurative commented 1 year ago

Hi I want to show some text like

"Showing 0 to 10 of 50 results"

where 10 is the number of items currently shown, Math.minMin(items.size, PageSize) and it updates when things are filtered, etc

Didn't seem possible

I created a footer component and was able to get it part way but I don't get the updated # of items when filter is applied etc

I think it should be built in

This is what I tried to give an idea


const PageItemsIndicator: React.FC<ITableProps> = (props) => {
  console.log(props)
  const totalItems = props.data?.length || 0;

  const pageSize = props.paging?.pageSize || 0;

  const start = (props.paging?.pageIndex || 0) * pageSize;
  const end = Math.min(start + pageSize, totalItems);

  return (
    <>
      <p className="whitespace-nowrap pt-4">
        {start} to {end} of {totalItems} results
      </p>
    </>
  );
};```
komarovalexander commented 1 year ago

Hi @amcurative paging is customizable I think you saw this https://komarovalexander.github.io/ka-table/#/custom-paging

to get filtered items use kaPropsUtils.getData(tableProps)

If you still have a question please provide an stackblitz example of the issue https://stackblitz.com/edit/table-custom-paging-ts?file=Demo.tsx