Only 13 rows are visible

[Suyog Patil]

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.

[Constantin Panaitescu]

Can you link a JSFiddle where I can reproduce the problem ?

[Suyog Patil]

I don't have JSFiddle link as it is in my application. However, below is the CSS:

/* TREE TABLE */

.cp_tree-table {
  font-size: 14px;
  font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  display: inline;
}

/* Cells */

.cp_tree-table .cp_tree-table_cell,
.cp_tree-table .cp_tree-table_header-cell {
  display: flex;
  align-items: center;
  padding: 0 10px;
}

/* Index cell  */

.cp_tree-table .cp_tree-table_cell .toggle-button {
  position: relative;
  display: inline-block;
  border: none;
  height: 14px;
  vertical-align: middle;
  padding: 0 5px 0 0;
  margin: 0;
  cursor: pointer;
  background-color: transparent;
  outline: none;
}

.cp_tree-table .cp_tree-table_cell .toggle-button::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 5px 0 5px;
  border-color: #040402 transparent transparent transparent;
  padding: 0;
  vertical-align: middle;
}
.cp_tree-table .cp_tree-table_cell .toggle-button
.cp_tree-table .cp_tree-table_cell .toggle-button+span {
  vertical-align: middle;
}

.cp_tree-table .cp_tree-table_cell>.without-children>span {
  padding-left: 15px;
}

.cp_tree-table .cp_tree-table_cell>.with-children>span {
  font-weight: 600;
}

.cp_tree-table .cp_tree-table_cell .toggle-button::after{
  height: 12px;
}
.cp_tree-table_cell .checkbox, .radio {
  margin-bottom: 12px;
  margin-top: 15px;
}
/* .cp_tree-table_viewport {
  max-height: 50vh !important;
} */
.login-page .input-group-addon:last-child {
  background: #000;
  border: 1px solid #000 !important;
}
.cp_tree-table_cell .form-control {
  height: 20px !important;
  line-height: 1;
  margin-top: 4px !important;
}
.cp_tree-table_viewport::-webkit-scrollbar-thumb {
  background: #848d94 !important;
}
.cp_tree-table_viewport::-webkit-scrollbar-track {
  background: #d2d2d2;
  border: 1px solid #b1b5b8;
}
.cp_tree-table_viewport {
  overflow-y: auto !important;
}
.cp_tree-table_viewport::-webkit-scrollbar {
  display: inline !important;
}

and source:

<TreeTable
              value={treeValue}
              onChange={this.handleOnChange}>
              <TreeTable.Column basis="50px" grow="0"
                renderCell={this.renderSelectCell}
                renderHeaderCell={() => <span></span>} />
              <TreeTable.Column basis="400px" grow="1"
                renderCell={this.renderIndexCell}
                renderHeaderCell={() => <span>Name</span>} />
              <TreeTable.Column basis="175px" grow="0"
                renderCell={(row) => <div className="text-right">{row.data.pricing}</div>}
                renderHeaderCell={() => <span>Pricing</span>} />
</TreeTable>

[Constantin Panaitescu]

Please spend 10 min and create a JSFiddle where I can reproduce the problem (you can use https://jsfiddle.net/constantin_p/hb8597sr/ as a base, paste over your code, data and css). I cannot reproduce the problem with just the information you listed.

[Suyog Patil]

I tried to reproduce with the base code on JSFiddle but unable to do that. Also, I tried pasting the demo code, data and css in my application but problem persist. May be there is some other issue. However, if I give height property to the TreeTable, rows upto that height are displayed. So wondering, something is overwriting the height property?

The workaround that I have implemented is - I am calculating the table height dynamically by determining the $state.isVisible property. With this full data is displayed, but my table is expanding vertically.

[Constantin Panaitescu]

It's still impossible for me to solve this without having an instance where I can reproduce the problem.

I'm just going to list some point that may help you identify the source of the bug:

1. Make sure you are on the latest version v1.0.0-beta.8.
2. Make sure that the height property on TreeTable is a number (or try without having it set).
3. Try to comment all the CSS related to the table and see if the problem persists (the table should still function without any customisation).

[thegliche]

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

[thegliche]

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;
}