Manually create subRow structure without using a PivotBy

[vaidsu]

I have an application where I am rendering a directory structure. I have created a recursive rendering using subcomponent and fetch data, where on every pivot expand of the subcomponent, it fetches the data as per the name and the re-renders a new subcomponent.

Here, every time I render the subcomponent I can easily render the whole react-table again. I wish to render just rows. Especially padded rows. No column headers.

I am trying different things while understanding the code.

So far I have tried to use TrComponent, TrGroupComponent, makePadRows directly but nothing has worked.

Sorry for posting a question in issue, any suggestion is appreciated.

Thanks.

[tannerlinsley]

Interesting. So basically you want to manually create indented sub rows with expander arrows? On Sat, Feb 25, 2017 at 7:28 PM Vaithiyanathan Sundaram < notifications@github.com> wrote:

I have an application where I am rendering a directory structure. I have created a recursive rendering using subcomponent and fetch data, where on every pivot expand of the subcomponent, it fetches the data as per the name and the re-renders a new subcomponent.

Here, every time I render the subcomponent I can easily render the whole react-table again. I wish to render just rows. Especially padded rows. No column headers.

I am trying different things while understanding the code.

So far I have tried to use TrComponent, TrGroupComponent, makePadRows directly but nothing has worked.

Sorry for posting a question in issue, any suggestion is appreciated.

Thanks.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/tannerlinsley/react-table/issues/98, or mute the thread https://github.com/notifications/unsubscribe-auth/AFUmCRyJQr3OKDI5_JmycmW9hDUwH3ERks5rgONLgaJpZM4MMNq3 .

[vaidsu]

Yes. Its a huge directory structure with lot of data integrated as a part of each person. So loading all the data upfront and pivoting them would be a performance issue.

So I made it fetch when click, which is free when I use subcomponent.

Please correct me if my assumptions are wrong:

• Pivoting is done on pre-rendered data, i.e. the {data} we insert into ReactTable
• I can extend TrRow and TrRowGroup, but cannot use them as a subcomponent.
• If I have to pre-fetch data, either I should implement a click handler using your getProps example or async pre-fetch data as soon as the first data is loaded. But the latter would be a bit complex since I have to maintain more states.
• If I extend the data state already existing, it would re-render the table with new dataset?

Depending on my assumptions, I can pursue my experiments, if gaps found I am open to contribute back. I have design significant amount of requirements around your table, so I am open to stick to it and help grow :)

[tannerlinsley]

Awesome! I'm going to sleep on this and hopefully have a good solution path for you by Monday :) On Sat, Feb 25, 2017 at 8:28 PM Vaithiyanathan Sundaram < notifications@github.com> wrote:

Yes. Its a huge directory structure with lot of data integrated as a part of each person. So loading all the data upfront and pivoting them would be a performance issue.

So I made it fetch when click, which is free when I use subcomponent.

Please correct me if my assumptions are wrong:

• Pivoting is done on pre-rendered data, i.e. the {data} we insert into ReactTable
• I can extend TrRow and TrRowGroup, but cannot use them as a subcomponent.
• If I have to pre-fetch data, either I should implement a click handler using your getProps example or async pre-fetch data as soon as the first data is loaded. But the latter would be a bit complex since I have to maintain more states.
• If I extend the data state already existing, it would re-render the table with new dataset?

Depending on my assumptions, I can pursue my experiments, if gaps found I am open to contribute back. I have design significant amount of requirements around your table, so I am open to stick to it and help grow :)

— You are receiving this because you commented.

Reply to this email directly, view it on GitHub https://github.com/tannerlinsley/react-table/issues/98#issuecomment-282529982, or mute the thread https://github.com/notifications/unsubscribe-auth/AFUmCTcS36R430Tv9qFGYHt3X7ASnUdzks5rgPFSgaJpZM4MMNq3 .

[vaidsu]

Thanks a lot. Just before I let you into that state, some data from my experiments.

• I was able to add the data through parallel fetch.
• However, since the data is like this:

[
{parent: 'abc', child: 'xyz'},
{parent: 'xyz', child: 'ttt'},
{parent: 'xyz', child: 'zzz'}
]

Now this is good enough, but there is a catch, I want xyz to also be inside the abc's (its parent's) pivot. That doesn't happen now obviously since the data is not like that. And currently AFAIK there is no way to say:

[
{parent: 'abc', 
child:  [
{parent: 'xyz', child: 'ttt'},
{parent: 'xyz', child: 'zzz'}
]
}

]

Is that a fair assumption?

[tannerlinsley]

I haven't been able to find a good solution for this problem yet. I've fiddled around with allowing manual subRows, but so far I haven't been able to make it work. That is most definitely the way the solution needs to go though. The dataModel logic and the render logic should be able to handle manually assembling your own subRow tree without pivotBy being used.

[vaidsu]

Thanks a lot of checking.

I did some experiments on my own too. Built a basic table to learn the art of appending rows like a linked list.

In that process, I found that, may be if the Row and the TrGroup/TrRow components are exported out, such that I can just add the Row Component as a subcomponent, would that be helpful?

Which is quoting: "I've fiddled around with allowing manual subRows"

On Tue, Feb 28, 2017 at 11:24 AM, Tanner Linsley notifications@github.com wrote:

I haven't been able to find a good solution for this problem yet. I've fiddled around with allowing manual subRows, but so far I haven't been able to make it work. That is most definitely the way the solution needs to go though. The dataModel logic and the render logic should be able to handle manually assembling your own subRow tree without pivotBy being used.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/tannerlinsley/react-table/issues/98#issuecomment-283137137, or mute the thread https://github.com/notifications/unsubscribe-auth/AQSdKYSoRAEzUQx6mMtEZPoFehmQkNmHks5rhHSFgaJpZM4MMNq3 .

[aaronschwartz]

I've been thinking about this too for my own needs.

I would love an API that looks something like this.

File directory list as example (This isn't my use case though):

        let data = [
            {
                dirName: "Projects",
                dirPath: "/home/projects",
                dirSize: "40mb",
                children: [
                    {
                        dirName: "project_1",
                        dirPath: "/home/projects/project_1",
                        dirSize: "30mb",
                        children: [
                            {
                                dirName: "sub_1",
                                dirPath: "/home/projects/project_1/sub_1",
                                dirSize: "20mb"
                            },
                            {
                                dirName: "sub_2",
                                dirPath: "/home/projects/project_1/sub_2",
                                dirSize: "10mb"
                            }
                        ]
                    },
                    {
                        dirName: "project_2",
                        dirPath: "/home/projects/project_2",
                        dirSize: "10mb"
                    }
                ]
            }
        ]
    }

    <ReactTable data={data} subrowAccessor={"children"}/>

I'm not sure if this would complicate the library too much.

[tannerlinsley]

I know I can make this happen. Just need to do another pass on it from scratch. It's just a matter of of:

• Recursively accessing the data if needed
• Enabling the subRow component view logic for non-pivotBy's with manual subRows

[milieux]

Related: hiding the expander if there is no manual subrow.

[aight8]

This feature would be awesome because I have exactly the same requirement. I tried several solutions but currently not found the best way to accomplish this.

Using SubComponent to render a sub table is currently the only solution to fulfill somehow the requirement. However it not benefits of the "one-table" advantages like the pivot functionality.

By the way I already tried with pivotBy but I recognised fast that it ends up in a static nested structure. My data items have an id property:

root.field1
root.field2
root.items.1.field3
root.items.2.field4

So the maximum I can accomplished was a table output like:

- undefined
   - field1
   - field2
- items.1
   - field3
   - field4

Beside the "subRow" method or however strategy, maybe a "dynamic pivot" (or call it table based tree! ;)) could be also a nice feature. So that the nesting are created dynamically per entry. Every item must provide it's parent.

Apropos... I think one picture says everything:

[vaidsu]

Hi all and @tannerlinsley sorry its been very very long since I came back to this thread. Apologies for delay.

However, I had some deliverables, so did some of my own solutions, and now ready to contribute back. I am using a combination of plain tables through Semantic UI react and React Table with search.

Essentially here are the features I implemented:

• Sementic UI tables contains a linked list tree based remote fetching and caching compatible pivot table that can keep going as long as there is data. The data is driven by the server-side data, by having a flag called is_pivot = true/false.
• I haven't completely abstracted to put to use for any use case, but it is clean enough to start patching into React Tables.
• On top of it, I am still using your tables for other purposes where the datasets are important to be multi-sorted. Love your shift+ sort options 👍
• Now have few questions:
  • Are your tables responsive to different screen sizes? When I tried rendering in mobile, I saw PaginationComponent wrapped and wasn't stacked.
  • Would you be interested in providing a plugin (already tested) on top of Semantic UI CSS ?
  • Would you be okay to accept a search Component (already tested) ?
  • Finally, need some cues on how to convert the code I have using LinkedList based tree algorithm into your infrastructure.

[tannerlinsley]

@vaidsu your questions:

• The table is responsive to a certain point (there is no stacking involved, and there are no plans to include responsive stacking in the core of the library). We consider the base styles to be sufficient for the majority use case.
• We don't plan on providing any "official" plugins just yet, but I would be more than happy to put an example of it in the Wiki until we a more suitable home for plugins comes to light.
• (See above)
• We ourselves are still working on a decent way to do manual subRows. There are a lot of possible answers and use cases for doing so and we want to make sure it will be flexible enough to allow for the majority use case of customization.

@here, we have tested a few ways of accomplishing manual subRows (one of which is easily achieved by changing the subRowsKey to children and just nesting your rows inside of a children key in your rows. This opened up a pandoras box of edge cases and different uses that we weren't ready to put into v6, so we are going to leave this issue open and keep chipping away at the feature.

[jehrlich]

I'm not experienced enough in js or html to understand the full detail of what is being discussed here, but I see this as a need for a flexible cell-level subcomponent. That is, the current SubComponent functions at the row level and is very adaptable to all kinds of use cases there. Would it not be possible to design a similar interface at the cell level so that there is an expand icon attached to a cell which passes the cell data to something similar to SubComponent?

In my current case, each data row includes a cell with an array of 1..n sub-objects. My accessor writes a concatenated list of the names of the sub-objects, and the filter is easily adapted to search the array for any match. I first tried using the SubComponent to show a nested table of the expanded array. That was OK except it's really a cell-level, not row-level expansion, and I needed the row-level expansion for a different purpose (to display an html document generated from the row). So I want to be able to designate a cell as expandable, which will add an icon to the cell which, when clicked, will show a SubComponent which is passed the cell data.

I think what I am suggesting is that you simplify by adding a generic row-level subcomponent rather than building in full functionality from the start.

[roginfarrer]

Just want to comment that this is exactly a feature I'm looking for! Do you think we'll see this feature make into a future release?

[tannerlinsley]

I suspect you will, as this is technically being developed, but it won’t be very soon. :(

On Thu, Jul 6, 2017 at 7:43 AM Rogin Farrer notifications@github.com wrote:

Just want to comment that this is exactly a feature I'm looking for! Do you think we'll see this feature make into a future release?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/tannerlinsley/react-table/issues/98#issuecomment-313399836, or mute the thread https://github.com/notifications/unsubscribe-auth/AFUmCdI24WT8Qq_U-HVxk9TSSIaY8Esqks5sLOR6gaJpZM4MMNq3 .

[davchang]

Can we make SubComponent be dynamic? Currently once SubComponent shows up, it won't go away unless you re-launch the component.

example:

let subComponentAttr = {}
if (this.state.showSubComponent) {
  subComponentAttr = {
    SubComponent: (row) => console.log('showing showSubComponent...')
  }
} else {
  subComponentAttr = {}
}

return (
  <div>
    <button onClick={this.handleClick}>Click me</button>

    <ReactTable
      data={data}
      columns={columns}
      {...subComponentAttr}
    />
  </div>
)

[tannerlinsley]

@davchang Why not just click the arrow to hide the subComponent? Or use the fully controlled expanded and onExpandedChanged props?

[davchang]

Thank you for the great open source. I am now trying to use expanded and onExpandedChanged props.

When an user clicks an arrow, I want to append an empty div just like what SubComponent did. The snippet is not working. Am I missing anything?

const columns = [{
  Header: '',
  accessor: '', // String-based value accessors!
  expander: true,
  show: this.state.showSubComponent,
  getProps: (state, rowInfo, column) => {
    return {
      className: 'myFoo'
      style: {
        background: 'yellow'
      }
    }
  }
}, {
  Header: 'Name',
  accessor: 'name' // String-based value accessors!
}, {

… <ReactTable data={data} columns={columns} onExpandedChange={(newExpanded, index, event) => { return ( <div style={{padding: '20px'}}> It even has access to the row data:

[tannerlinsley]

This feature request is going into the deep freeze until the next major version. TBD

[oowowaee]

@tannerlinsley Seeing as how the status of this feature is unknown, could you expand on your solution mentioned here:

@here, we have tested a few ways of accomplishing manual subRows (one of which is easily achieved by changing the subRowsKey to children and just nesting your rows inside of a children key in your rows. This opened up a pandoras box of edge cases and different uses that we weren't ready to put into v6, so we are going to leave this issue open and keep chipping away at the feature.

[pdrbrnd]

Was this implemented in any new version?

[oowowaee]

@pbrandone I don't believe so, I had to go with transforming the data to a flat structure and pivoting on the parent key.

[burgalon]

any news here? Has anyone been able to get around this elegantly?

[JohannesFischer]

Would be interested in a solution too. Any news?

[shamilium]

@tannerlinsley can you give us a hope, please?

[tannerlinsley]

You will be able to do this in the next version.

[shamilium]

@tannerlinsley thanx! I see 7.0.0-alpha.0 already published, but no documentation yet. Can you give the cue what props to use? Excuse my annoyance.

[tannerlinsley]

It's not documented for that reason. The API is still in too much flux. If you want to to try the alpha you can use the codesandbox in the readme.

On Tue, Feb 5, 2019 at 8:57 AM Shamil notifications@github.com wrote:

@tannerlinsley https://github.com/tannerlinsley thanx! I see 7.0.0-alpha.0 already published, but no documentation yet. Can you give the cue what props to use? Excuse my annoyance.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/tannerlinsley/react-table/issues/98#issuecomment-460692215, or mute the thread https://github.com/notifications/unsubscribe-auth/AFUmCWspBvst227WbBwuZ_4883JYQzDzks5vKanggaJpZM4MMNq3 .

[shamilium]

I solved my problem (with version 6.8.6 of react-table) setting up subRowKey prop and adding expander column: <ReactTable data={this.props.incidentSteps} columns={columns} subRowsKey="child_steps"

@vaidsu did you try it? But I have to say that i need only one level of nesting.

[lokeshnagpal]

I want to display tree-view in column and expand/collapse showing with cell value in same column using react-table. As what i see react-table has tree-view with expand/collapse but not showing with value. Sharing the screenshot what I actually want. Please provide source code in react-table.