question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

TableHeader.onSort doesn't work with Table.scrollable=true

See original GitHub issue

Adding scrollable={true} to the Table component stops executing TableHeader onSort callback.

This works as expected:

<Table>
  <TableHeader labels={['Name', 'Note']}
    sortIndex={0}
    sortAscending={true}
    onSort={this.onSort}
 /><tbody>...</tbody></Table>

After adding scrollable={true}, callback this.onSort is not called anymore:

<Table scrollable={true}>
  <TableHeader labels={['Name', 'Note']}
    sortIndex={0}
    sortAscending={true}
    onSort={this.onSort}
 /><tbody>...</tbody></Table>

Your Environment

  • Grommet version: 1.2.0.
  • Browser Name and version: Google Chrome 55.0.2883.95 (64-bit)
  • Operating System and version (desktop or mobile): macSierra 10.12.2

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:5
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
bammmmmmmmmcommented, May 15, 2017

I agree with @dakt

1reaction
daktcommented, Apr 19, 2017

Well this is still the case even in 1.3.4. I really don’t understand how can this problem persist for so long. Just don’t tell me it’s by design. This makes

component useless.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Table fixed header and scrollable body - Stack Overflow
Does not work when there is more than one row in the table header. When scrolling the 2nd header line jumps up and...
Read more >
Misaligned header on a scrollable table with column widths ...
Setting just the width of the th elements should be enough to correctly line up the header and body columns where scrolling is...
Read more >
ScrollY: misaligned table headers with bootstrap - DataTables
With ScrollY enabled, our table headers are misaligned (too narrow). We have multiple tables but only the first has correct alignment while ...
Read more >
A table with both a sticky header and a sticky first column
It's pretty easy to make the header of a table stick to the top of the screen while scrolling through a bunch or...
Read more >
<table>: The Table element - HTML - MDN Web Docs - Mozilla
The <table> HTML element represents tabular data — that is, information presented in a ... Sorting rows with a click on the th...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found