Semantic-ui-react: DataTable Component

[cschmidli]

This is a follow up of the discussion regarding #1110 (pagination support) and possibly sorting as well. I understand that you think those features should be handled outside, but nevertheless, I believe they are very useful to many users and it would be great to find a way to make them part of the library.

One idea that comes to mind is to create a "wrapper" component and call it e.g. DataTable. This component excludes a lot of the flexibility that you have with using the Table (etc.) components separately, but it offers a very efficient way to display a lot of data (>20 rows) and supports features like pagination and sorting.

Here's a gist of the "DataTable" component I created and use in some of the projects (incl. a small example how to use it): https://gist.github.com/sagax85/d1fad8de71fdcebdd384736160418dac

What do you think? If you're interested, I gladly specify it in more detail here.

[UnbrandedTech]

I did something similar to that but I also added a search bar
https://gist.github.com/UnbrandedTech/38262b2cc2372ed356e1a03d94dd9d3d

[levithomason]

I'd like to get something like this going. Let's start a PR and hash out the API there. 👍

[cschmidli]

@UnbrandedTech do you wanna create a pull request with your example/solution? seems like a pretty good start.

[subodhpareek18]

I have another suggestion for a data table component. The header for such a table should be sticky.

There would be two ways to do it probably, 1 is that the header is fixed and the page scrolls with the rows, the other is table is fixed in size and the tbody has an overflow scrolls.

[subodhpareek18]

Also for anyone that hasn't seen this:
https://datatables.net/examples/styling/semanticui.html

The above example looks quite good.

[levithomason]

@zusamann Fantastic, I'd love to have this implemented in SUIR (without jQuery).

[CrisLi]

@levithomason Any progress on the DataTable component?

[levithomason]

I haven't seen any PR for it yet @CrisLi.

[JustinTRoss]

Any progress on this?

[siarheipashkevich]

Do you have any progress on this?

[subodhpareek18]

For now I've been working with react-table https://react-table.js.org/, really easy to work with and has almost all the features I need. And definitely the most elegant minimal design. Maybe someone could write a css wrapper on top using semantic-ui

[levithomason]

Folks, please try to refrain from simply asking for progress. We get emails and notifications for all posts on GitHub and we try to do our best to respond to all of them. The less noise the better job we can do for you and the community. GitHub is best used for issues, fixes, and new features.

A good place to check progress is the PR list. If there is no PR, there is more than likely no progress as all development is done in the open.

Another great option is the Gitter channel.
There are active members in here who can also answer questions.

Thanks for understanding and helping us stay focused!

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.

[levithomason]

Thanks to @rijk, we have improved how we handle stale issues, see #2761. Reopening.

[stale[bot]]

There has been no activity in this thread for 90 days. While we care about every issue and we’d love to see this fixed, the core team’s time is limited so we have to focus our attention on the issues that are most pressing. Therefore, we will likely not be able to get to this one.

However, PRs for this issue will of course be accepted and welcome!

If there is no more activity in the next 90 days, this issue will be closed automatically for housekeeping. To prevent this, simply leave a reply here. Thanks!

[stale[bot]]

This issue will be closed due to lack of activity for 12 months. If you’d like this to be reopened, just leave a comment; we do monitor them!