TanStack / table

🤖 Headless UI for building powerful tables & datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table
https://tanstack.com/table
MIT License
25.2k stars 3.08k forks source link

Aggregate Functionality Not Working in the Select Tree Table (HOC) #759

Closed sasa5195 closed 6 years ago

sasa5195 commented 6 years ago

What version of React-Table are you using?

Your bug may already be fixed in the latest release. Run yarn upgrade react-table! Place your version here... 6.7.6

What bug are you experiencing, or what feature are you proposing?

Please include a detailed explanation here... I am using SELECT TREE TABLE (HOC) of the react-table library and tried to add the aggregate property in the columns list under the getColumns() function. But was not able to see the aggregate functionality working as expected in fact it just rendered the output as it was before. So can you please guide me whether the functionality of aggregation works with the Select Tree Table (HOC) ?

https://1vl3n1kmw4.codesandbox.io/

Please see the Highlighted piece of code.,

import React from 'react' import { render } from "react-dom" import Chance from 'chance'

import ReactTable from 'react-table' import 'react-table/react-table.css'

import selectTableHOC from 'react-table/lib/hoc/selectTable' import treeTableHOC from 'react-table/lib/hoc/treeTable'

const SelectTreeTable = selectTableHOC(treeTableHOC(ReactTable))

import testData from './test_data'

// const CheckboxTable = checkboxHOC(ReactTable);

const chance = new Chance();

function getData() { const data = testData.map((item) => { // using chancejs to generate guid // shortid is probably better but seems to have performance issues // on codesandbox.io const _id = chance.guid(); return { _id, ...item, } }) return data; }

const ignoreColumns = ['phone1','phone2','web','email','_id']; function getColumns(data) { const columns = []; const sample = data[0]; for (let key in sample) { if (ignoreColumns.includes(key)) continue; columns.push({ accessor: key, Header: key, aggregate: vals => vals + '', style: { whiteSpace: 'normal' }, }) } return columns; }

function getNodes(data, node = []) { data.forEach((item) => { if (item.hasOwnProperty('_subRows') && item._subRows) { node = getNodes(item._subRows, node); } else { node.push(item._original); } }); return node; }

The below image shows the pivoted values but doesnt give the values of other columns separated by comma

selecttreetable

The below image is from the Pivoting and Aggregation example, Wanted to achieve this,

aggregation

gary-menzel commented 6 years ago

The treeTable HOC is not meant to be able to use aggregation. It was built to demonstrate how the pivot table can be restyled. If you want aggregation as well then you'll have to implement that (however, it will probably be better just to use what is already there because there is no way to have the cells spaced out with the colSpans that would be necessary for it to work with aggregations. Its a "treeTable" not a "treeTableWithAggregation" - sorry.