constantin-p / cp-react-tree-table Goto Github PK

Hi,

I noticed that in v1.0 hasVisibleChildren has been removed from RowMetadata properties. Is there other substitutes for this property? Basically what I'm trying to achieve is to show different toggle icon when the node is expanded.

Thanks!

Getting an error like:

Could not find a declaration file for module 'cp-react-tree-table'. './node_modules/cp-react-tree-table/dist/index.js' implicitly has an 'any' type.
  Try `npm install @types/cp-react-tree-table` if it exists or add a new declaration (.d.ts) file containing `declare module 'cp-react-tree-table';`ts(7016)

On the import statement (as copied from the example)

I'm receiving the following error when attempting to install the package. Has cp-react-tree-table been tested with [email protected]? Would it be possible to update the component for the dependency with [email protected]?
Thanks,
Eric

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"^18.1.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^0.14.9 || ^15.0.0 || ^16.0.0 || ^17.0.0" from [email protected]
npm ERR! node_modules/cp-react-tree-table
npm ERR! cp-react-tree-table@"*" from the root project

Hi,
I am using React JS 15.x version. How can I use this component in React JS app i.e using 15.2 version?

Hello,

The tree table renders fine if we provide static data, like in your example.
When I try to load dynamic data from API call. It displays following error:

Hy CP,

I really don't know how long this feature would take to implement but having the possibility to sort the columns on the header click would be another great feature on this component.

Maybe this could be a good starting point for this feature
https://www.smashingmagazine.com/2020/03/sortable-tables-react/

I am not sure, I am doing everything correctly, but It is not seem to be possible to programmatically create a Column, or its props, or props for TreeTable. Probably, when using from pure JS it does not matter since you use dynamic object creation and it does not care for those types, but there should be some problems with TS similar to what I see with Kotlin-JS.

Is it possible to show only the rows that are parents.

The "Expand all" function shows everything with the children, and I just want to show only the rows parents

After the user finishes their edits on some rows in the table (using ), I was wondering if it is possible to convert the new modified TreeState into the same format as the data used to create the TreeState. How would I do such a thing?

Example:
const MOCK_DATA = [
{
data: { name: 'Company A', expenses: '105,000', employees: '22', contact: 'Makenzie Higgs' },
children: [
{
data: { name: 'Department 1', expenses: '75,000', employees: '18', contact: 'Florence Carter' }
}
]
}
];

...
treeValue: TreeState.create(MOCK_DATA)
...

and then after the edits/changes, we can turn treeValue into the below:

const NEW_MOCK_DATA = [
{
data: { name: 'Company A', expenses: '105,000', employees: '22', contact: 'John Doe' },
children: [
{
data: { name: 'Department 1', expenses: '75,000', employees: '18', contact: 'John Doe' }
}
]
}
];

Love this repo! I've been looking at the demo and comparing it to my local implementation to see why I'm having performance issues when scrolling up and down many times. Anyone else running into this issue? I have some rows where there are 6 levels of nesting and I have around 400 rows. My hunch is there is some sort of throttling that is being done in the demo somehow but not being done in my implementation due to the screen being blank for a second before the rows render on scroll versus locally there is no blank screen. I am using beta 10.

Best,

Kenny Song

Edit: I just added lodash's throttle to the onScroll function within VirtualList and it's working just fine now.

I have multiple nesting with the configuration: font size: 14px, cell height: 12px, table height: default. I am trying to expand nested childs but table displays only 13 rows. I can see the table scrolls down with empty rows. The scroll bar is also visible but after 13 rows, empty space equivalent to the expanded rows is displayed.

If I increase the table height, more rows are visible.

This is becoming a showstopper for me. Please help if I am missing any configuration.

Hi,
Am trying to create 'Expand All' and 'Collapse All' buttons for the tree

Here is a fiddle, where I tried to achieve 'Expand All' utilizing 'scrollIntoView'
https://jsfiddle.net/sujaikarthik/Lystd2j9/47/

Above method did not work when there was lot of data.
Also, I wasn't able to utilize any other methods to achieve 'Collapse All'

Can you please help by providing any methods , I could use to achieve both 'Expand All' and 'Collapse All'

Thanks

I was wondering if there is a way of rendering the tree already expanded instead of having to have a expand all button be pressed?

What would be the best strategy to do this in your view?
Thanks!

Hi,

We cant able to increase the table height from this table. if try to increase the height data getting hide. whole data we cant able to display properly please help us to resolve this.

.cp_tree-table_viewport : cant able to increase the size.

table height not fitting the page few of the rows getting hide. see the example in below image

Apologies for posting here...

For how many records/data, is this component optimized?

Hi @constantin-p ,
I have been trying to make the table data editable and I faced a issue.

• When the data on outer rows are edited, the table refreshes( not re-render of whole table ) with the
  new data.
• It doesn't re-render ( rows expanded, remains as such) and works perfectly.

But.,

• When the data on inner rows are edited, the table doesn't refresh with the new data.
• It requires a re-render to show the newly edited data.

Work around is to do a state change to re-render the table , whenever data is edited. But in that case the complete table is re-rendered and all expanded rows are collapsed and the focus is lost.

I wasn't able to create a fiddle of exact scenario, as in my case I pass the updated data through props from a different component.

sample code :

render() {
 const { dataState } = this.props;   
<TreeDataTable data={dataState} height={200} className="demo-tree-table" >
          <TreeDataTable.Column grow={0} basis="300px" renderCell={this.renderIndexColumn} />
          <TreeDataTable.Column grow={1} renderCell={this.renderColumn} />
 </TreeDataTable>
}

Above code works perfectly when the data change is in the outer rows.

Here is a JSfiddle of what am trying to achieve.

In the above jsfiddle, the table re-renders for outer row edit as well, since the data is updated through state. But in my actual case, since data is updated through props, no table re-rendering happens for outer rows. ( And for inner rows , the updated data doesn't show up in the table )

I really appreciate your help towards this. Thanks a lot !!!

I have implemented a search functionality, by using scroll to specific node option by the below example
https://jsfiddle.net/constantin_p/bksfxe61/11/?utm_source=website&utm_medium=embed&utm_campaign=bksfxe61

is there any parameter/option for highlighting the specific node (row) in the table when using scroll to specific node.

When you have multiple nesting levels the nesting levels is getting hidden

I have nesting level till ten but i am not able to see more than 4

https://jsfiddle.net/praveenc36/ya4cuwxb/2/

I need to get the data of the row I select

Do you any utility function to convert the normal hierarchical tree json structure to the component supported format

For Ex if i have a Sample JSON

[
{
name: 'Company I', expenses: '105,000', employees: '22', contact: 'Makenzie Higgs',
children : [
{ name: 'Group beta', expenses: '10,000', employees: '6', contact: 'Camila Devonport' },
{ name: 'Group gamma', expenses: '40,000', employees: '4', contact: 'Violet Curtis' },

            ]

    }

]

There's only 4 open issues that haven't been addressed. Is this project dead?

Hi, first of all, thanks for this awesome library!

I'm new to React, but have been trying to apply style to deeper elements in your tree table using material-ui's withStyle HOC, with no success.

For example, to apply the demo-tree-table and cell-wrapper classes I am trying the following:

const styles = theme => ({
root: {
width: '100%',
marginTop: theme.spacing.unit * 3,
},
demoTreeTable: {
borderTop: '1px solid #ccc',
borderBottom: '1px solid #ccc',
'& $cellWrapper': {
display: 'flex',
alignItems: 'center',
fontSize: '12px',
height: '100%',
width: '100%',
},
},
cellWrapper: { },
});

And my render method:

render () {
const { classes } = this.props;
return (

<TreeDataTable data={mockData} height={'100%'} classes={classes.demoTreeTable}>
<TreeDataTable.Column grow={0} basis="300px" renderCell={this.renderIndexColumn} />
<TreeDataTable.Column grow={1} renderCell={this.renderColumn} />


);
}

Thank you in advance!

Hi,

How can we update the table after the state change.
I am updating the state with children of selected row on click. But the table not get update with new children underneath that row.

Can we achieve in the current version?

Hi,

I found an issue with your demo (https://jsfiddle.net/constantin_p/fvuswrbm/), reproduced both on Chrome and FF. Steps:

1 Un-toggle both depth:2 and depth:1
2 Scroll up to the top of the list
3 Click the button "Scroll to ..."
4 Notice how it only scrolls to depth:2
(it does expand depth:3, but won't scroll to that position)

increasing height in .cp_tree-table .cp_tree-table_viewport causes some rows not to be visible

@thegliche
thegliche commented now
https://jsfiddle.net/asLfgdn3/1/ on your JS fidde change
.cp_tree-table {
font-size: 14px;
color: #040402;
background: #fff;
border: 1px solid rgba(55, 53, 47, 0.2);
font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
height: 100vh !important;
}

.cp_tree-table .cp_tree-table_viewport {
height: 100vh !important;
}

It would be great to have access to the current scroll position from VirtualList.

When will the udpated version of this tree will be available on Git hub repo?

Case:

• Default height per rows was okay if the context of cell wasn't high compared to default
• If you have a very long context then still using default per row height, it gonna affect the scroll behaviour and data that to be shown;
  Img below show that im already at the bottom of scrolling even though i still have some data to be shown but its not maximaxing due to its height set to default

Issue:

How can we update the height, not statically , but dynamically base on what the context height so that the image above will not gonna happen

I can't find anything in the doc to trap[ and onclick for a specific row"

Hello!

I have a question, If my data that I want to display isn't much, can I make the height of the table changes dynamically with the volume of the data ?

like in this case, is it possible to make the height of the table according to the size of the data ?

Thank you

https://jsfiddle.net/5yvgbrtk/

Am trying to modify the [toggle] into interactive + / - icons , based on node expanded / collapsed.
Since am using click event, the icons doesn't work as intended when multi-levels are closed at the same time.

Is there a method that could let us know, if the Node's Descendants are displayed in the DOM or not.

Any help would be much appreciated. Thanks.

I am having an issue where I have a checkbox on each row to select each row, but as I scroll through the other rows on the table the checkboxes that are checked change rows to the ones showing not the ones I actually selected.

Hi,

I am using v1.0.0-beta.8, hasVisibleChildren is not available RowMetadata properties. Is there any alternative for this property. I am trying to show toggle icons on expand/ collapse

Thanks!

Thanks for this awesome lib!

I want to contribute and add some things; before I go too far, what does your dev workflow look like? Running npm run dev generates some builds in the dist folder.

It might be worth adding a dev server to quickly iterate while working. In the meantime though, I'd love to know how you work/iterate on this.

Hi @constantin-p ,
Is there a way / method we could use to limit the expand / collapse up to certain level(depth). Like expand until the second level or expand until the third level.

Have done a rough fiddle - https://jsfiddle.net/sujaikarthik/Lystd2j9/103/. ( doesn't work as intended though. Its Just to give a clear idea on what am requesting for )

It would be really helpful, if we could have this. Thanks

We have implemented the align-items: center to the .cp_tree-table_cell and also to the cp_tree-table_header-cell. But in the output I'm getting this values cells data misaligned. Can anyone guide me on this?

Is there any way to know if a row has children visible in v1 ?

I want to boost the ui/ux by changing this black triangle used to mark rows with childrens but i'm stock simply because i can't know if it is expanded or not.

Am i missing something ?

I am unable to get the proper height with all rows without scroll.

On expand of 1 row few rows at the end are hidden.

Hi, thanks for interest component.
But I have a problem. Default row height = 26px. VirtualList uses this value for calculation. Сan I change row height?
Tried in css-file add margin between rows. cp-react_tree-table_row {margin-bottom:5px}
But this margin not included in the calculation height of virtuaList and scrolling wrong.
What are the options to change row height or add margin between rows? Thanks, good luck.

When calling expandAncestors on a single node, all nodes in the tree with children are expanded. I would expect only nodes that are direct ancestors of the node passed would be expanded.

Here is an example of all nodes being expanded.
jsfiddle link