v7 Feedback & Ideas - Githubissues

Grsmto commented 5 years ago

Hi, First, I'm trying v7, it's awesome to work with Hooks! Trying it for the first time so my comments might be wrong.

Describe the bug This are more of an architecture comment than a bug: If you disable useExpanded hook, the table breaks. ~~I know in userland you can't disable this hook but the fact that this happens,~~ (edit: actually you can) probably demonstrates wrong app design: I figured out this is happening because you're building initial state within the useExpanded hook (row.cells = ...).

Expected behavior I think that adding or removing hooks should not break the entire component. Hooks should be encapsulated.

Codesandbox! https://codesandbox.io/s/nk9rmym6m4

Solution That initial state logic could be within useTable itself (tested and works fine). I can provide a PR if needed.

ryanking1809 commented 5 years ago

Oh yes it can be found here https://codesandbox.io/embed/react-table-v7-sandbox-cr3eh Just note the source in the react-table folder table needs to be upgraded for a more accurate reference. Where can I find the latest source in this repo?

ggascoigne commented 5 years ago

Just chiming in to say that I've spent a little while working with the V7 alpha-5, and have really come to appreciate the new approach. Very well thought out, and so much easier to extend (I wrote a basic useSelection hook to enable row selection) than in V6. I also love that I have complete control over the presentation. Thank you, this is fantastic, and to be honest, extremely usable even in its alpha form.

Grsmto commented 5 years ago

The latest source are on master on this repo yes afaik.

Grsmto commented 5 years ago

@ggascoigne interesting, I've built my own useSelection as well! I suppose it could be included in the library if already 2 people had to build it themselves.

ryanking1809 commented 5 years ago

+1 for for row / cell selection!

ryanking1809 commented 5 years ago

There's a bit of a bug when using pagination and grouping. The children of the grouped rows are filtered out due to the page limit. So if you expand the last row all the children will be displayed on the next page. I'm not sure on the best solution, perhaps applying pagination only to top-level rows would work.

Grsmto commented 5 years ago

@ryanking1809 that's funny but I did a PR to fix exactly this last week. It's actually not a bug but a feature haha. cc @tannerlinsley Check my PR for more details https://github.com/tannerlinsley/react-table/pull/1372

ggascoigne commented 5 years ago

@Grsmto I suspect that a standard useSelection might be a good idea. Since mine lives outside of the library it's a bit tied to its presentation since it injects a checkbox column, but I'd be happy to help work towards a more shareable version.

Grsmto commented 5 years ago

@ggascoigne ok, mine is only doing pure business logic, no UI. I'll setup a code sandbox and maybe open a PR then.

ryanking1809 commented 5 years ago

@Grsmto oh perfect!

brycejacobs commented 5 years ago

Hey guys, really enjoying this hook rewrite. I'm going crazy with writing these plugins given how easy! Why not write a web socket pub / sub as a plugin for each row?????? (JK...jk)

Do you guys have any recommendations as far as the presentation layer? I know there's a clean line of demarcation when the plugin system was written, as to separate business logic from presentation...however there seems to be some crossover in situations that would need to modify both. How are you all recommending handling the cases that can't be separated cleanly?

Are you all making a base component such as in the Examples and passing props that trigger presentation changes that way? Or are you doing presentation changes in the hooks just not for the ones officially accepted under this project?

Also, has anyone tried to mix this up with render prop loaders and gauged performance?

Thanks again for the library, great experience so far and it's still alpha versioning!

Grsmto commented 5 years ago

As promised for whom is interested, you can find my useSelectRow hook and a working example with CodeSandbox in #1377

@brycejacobs I have been avoiding any presentation things in the hooks. I tried to make it "logic only" or at least versatile so it can work with a large number of UI cases. See the PR I did, that's what I'm using in production on a project and the hook is agnostic of the UI afaik.

lishine commented 5 years ago

As promised for whom is interested, you can find my useSelectRow hook and a working example with CodeSandbox in #1377

@brycejacobs I have been avoiding any presentation things in the hooks. I tried to make it "logic only" or at least versatile so it can work with a large number of UI cases. See the PR I did, that's what I'm using in production on a project and the hook is agnostic of the UI afaik.

I tried it now and, The shortcoming currently is that the component above component with useTable does not have access to rows, where the selection data is stored. For example filter and sort info is stored in state and the useTableState can be placed in the component above like in the server example. But useRows is not planned to be put in the component above.

lishine commented 5 years ago

Another thing is the onRowClick (it can also make it's way to this lib) I pass the click with onRowClick to the component above. But the click on the checkbox gets registered as well, need to be excluded, this is what I will add to my code now.

            <Row
                onClick={() => onRowClick({ index })}
                {...row.getRowProps({ style, even: index % 2, selected: row.isSelected })}
            >

thecodejack commented 5 years ago

It's been a while I have been using React Table v6 in my applications. But suddenly today when I visited thinking how can I use React table in right way for functional components, I see this(v7). Looks v7 in great shape. Just wanted to know when can this will done with full release from Alpha? Any ETA of same?

etaiklein commented 5 years ago

It would love web accessibility to be a first class concern for v7.

Here's some ideas about where to start

Use semantic html elements in the sandbox (currently every element is a div)
Create hooks that implement the ARIA grid role and ARIA treegrid role
Associate the Data Cells with the Appropriate Headers using scope="row" and scope="col" attributes where appropriate

This will not just help people who rely on assistive technology to navigate the web, but also it allows power users to navigate tables to their preference. It also looks really good for the library and inspires confidence!

tannerlinsley commented 5 years ago

PR’s are always welcomed! ;) On Jul 11, 2019, 10:06 AM -0600, Tai Klein notifications@github.com, wrote:

It would love web accessibility to be a first class concern for v7. Here's some ideas about where to start

• Use semantic html elements in the sandbox (currently every element is a div) • Create hooks that implement the ARIA grid role and ARIA treegrid role • Associate the Data Cells with the Appropriate Headers using scope="row" and scope="col" attributes where appropriate

You can read more about table accessibility at: https://webaim.org/techniques/tables/data https://www.w3.org/WAI/tutorials/tables/ https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Advanced This will not just help people who rely on assistive technology to navigate the web, but also it allows power users to navigate tables to their preference. It also looks really good for the library and inspires confidence! — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

matthewoates commented 5 years ago

It would be great if onFetchData supported promises. That way we wouldn't need to explicitly handle the loading state and the error state ourselves.

tannerlinsley commented 5 years ago

onFetchData is deprecated and also unnecessary in v7. Take a peek at the sandbox for server side data or stay tuned for a more specific example. On Jul 15, 2019, 6:49 PM -0600, Matt notifications@github.com, wrote:

It would be great if onFetchData supported promises. That way we wouldn't need to explicitly handle the loading state and the error state ourselves. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

powah commented 5 years ago

Any guidelines how to implement server-side + infinite scrolling (sandbox example for this case is not working)? I think any documentation for v7 would be beneficial for the project (more potential contributions). It's hard to grasp lib concepts (how hooks are composed, etc.) only by looking at the code. Any ETA for the initial docs?

tannerlinsley commented 5 years ago

I'm writing the documentation right now. It's a big undertaking so be patient. It's gonna be great. On Jul 17, 2019, 6:21 AM -0600, Aurimas notifications@github.com, wrote:

Any guidelines how to implement server-side + infinite scrolling (sandbox example for this case is not working)? I think any documentation for v7 would be beneficial for the project (more potential contributions). It's hard to grasp lib concepts (how hooks are composed, etc.) only by looking at the code. Any ETA for the initial docs? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

lpoulter commented 5 years ago

Are the HOC's for v6 compatible with v7? I'd like to make a row selectable with SelectTable

tannerlinsley commented 5 years ago

The v6 HOCs are not compatible with this rewrite. V7 is essentially a brand new library with a very different architecture and concept On Jul 18, 2019, 6:42 AM -0600, Laurie Poulter notifications@github.com, wrote:

Are the HOC's for version 6 compatible with v7? I'd like to make a row selectable with SelectTable — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

codepunkt commented 5 years ago

Is there an easy way to provide a fuzzy-based filter for either all or a pre-defined subset of columns?

the goal is to have a single filter input, where the user can type in his filter string and based on that input only the rows are shown where the filtered string (fuzzy) matches the contents of the pre-defined (or all) rows.

The current way of defining filters on each column and basically combining them with a boolean AND doesn't seem to do the trick - but maybe i'm missing something.

powah commented 5 years ago

@codepunkt sound like it should be OR not AND

powah commented 5 years ago

I think the only way to implement this currently is filter data in the parent component before giving it to react-table.

ggascoigne commented 5 years ago

Another option would be to create your own useFilter based upon the one in this repo and implement your own logic. Then use this new useFilter instead of the one in the main library.

nmccready commented 5 years ago

v7 is a great direction! It would be nice if useSortBy exported useMain as I truly only need sorting and little to none of the useTable. Not sure if this could be made more bare bones for sorting and maybe made it's own dedicated library or contributed to react-use.

My use case is in that the hook cares more about how to sort the data and less about Headers and Columns (already handled from the outside). Thoughts..?

tannerlinsley commented 5 years ago

@nmccready That's an interesting idea, however even the main hook in useSortBy itself is still based on the assumption that it's operating within React Table and its API. I think it would be very non-trivial to extract it's usefulness for usage outside of this context.

nmccready commented 5 years ago

I think it would be very non-trivial to extract it's usefulness for usage outside of this context.

You're right this is going pretty smoothly. I'll post back when I have a more polished solution.

nmccready commented 5 years ago

@tannerlinsley I noticed in the latest release alpha.16 the src/ is no longer published. This makes it very hard to consume this library in pieces without it. Also in in alpha.7 lib/ files did not match the source files for the ES5 compiled binaries.

tannerlinsley commented 5 years ago

In the latest alpha, you'll find I've readded src/**/*.js to the files list. If we end up needing lib/**/*.js files, I can also add those, but as of alpha.15, there shouldn't be any more files from v6 in the npm package.

nmccready commented 5 years ago

@tannerlinsley I ported the useSortBy hook here . I'm sure this could be extended / wrapped to fit your needs.

If you want me to PR something back to here I'd be happy to. It is working great thanks!

powah commented 5 years ago

@tannerlinsley can you please provide working server side example, let's say with pagination when useTableState is used in a parent component? I can't figure out why I get infinite rerendering.. after debugging it seems the cause is table state which I pass to child component responsible for the rendering. Somewhere ref equality is lost. Probably problem with the usage so working example would be a huge help. And thanks for your hard work!

tannerlinsley commented 5 years ago

@powah, Sure thing. Serverside examples are in the pipeline. I'm trying to get all of the client side examples and some snapshot tests of them done before moving on to server-side stuff. Hang tight!

dmr commented 5 years ago

This post has been open for a while. What can I do to get V7 released?

tannerlinsley commented 5 years ago

You can try the alpha, report missing use cases, write unit tests, or find bugs! On Aug 5, 2019, 2:05 AM -0600, Daniel Rech notifications@github.com, wrote:

This post has been open for a while. What can I do to get V7 released? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

nmccready commented 5 years ago

This post has been open for a while. What can I do to get V7 released?

❯ yarn info react-table
yarn info v1.16.0
{ name: 'react-table',
  description: 'A fast, lightweight, opinionated table and datagrid built on React',
  'dist-tags':
   { latest: '6.10.0',
     next: '7.0.0-alpha.18' },
  versions:
   [ '0.0.5',
     '1.0.0',
     '1.1.0',
     '1.2.0',
....
     '6.10.0': '2019-04-23T23:02:00.560Z',
     '7.0.0-alpha.3': '2019-05-21T20:38:44.827Z',
     '7.0.0-alpha.4': '2019-06-11T17:40:59.369Z',
     '7.0.0-alpha.5': '2019-06-11T17:41:34.599Z',
     '7.0.0-alpha.6': '2019-06-20T21:23:59.551Z',
     '7.0.0-alpha.7': '2019-07-15T17:29:46.048Z',
     '7.0.0-alpha.8': '2019-07-25T19:39:33.379Z',
     '7.0.0-alpha.9': '2019-07-26T16:32:33.216Z',
     '7.0.0-alpha.10': '2019-07-26T16:53:14.524Z',
     '7.0.0-alpha.11': '2019-07-26T17:11:31.925Z',
     '7.0.0-alpha.12': '2019-07-26T17:23:00.224Z',
     '7.0.0-alpha.13': '2019-07-30T16:23:37.539Z',
     '7.0.0-alpha.14': '2019-07-30T17:44:17.674Z',
     '7.0.0-alpha.15': '2019-07-30T20:10:16.559Z',
     '7.0.0-alpha.16': '2019-07-30T23:01:56.484Z',
     '7.0.0-alpha.17': '2019-07-31T18:27:54.731Z',
     '7.0.0-alpha.18': '2019-08-03T20:37:35.260Z' },

tannerlinsley commented 5 years ago

Also, if you find that you don't have time to help out on the project, or that you're simply just waiting for the next version to hit, you or the company you work for could always become a patreon supporter of the project. I have tiers from as low as $1 up to $500 / mo. Also to be noted, all patrons on any $100+ /mo plans get their logo in this project's readme with a link to wherever they want. The repo receives about 35k unique visitors every month.

dmr commented 5 years ago

You can try the alpha, report missing use cases, write unit tests, or find bugs! … On Aug 5, 2019, 2:05 AM -0600, Daniel Rech @.***>, wrote: This post has been open for a while. What can I do to get V7 released? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

Thank you for your responses and thank you for investing time and effort into improving this! I was looking into the alpha and I like it so far but I'll have to find more time to test it with more complicated use cases.

tannerlinsley commented 5 years ago

You can try the alpha, report missing use cases, write unit tests, or find bugs! … On Aug 5, 2019, 2:05 AM -0600, Daniel Rech @.***>, wrote: This post has been open for a while. What can I do to get V7 released? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

Thank you for your responses and thank you for investing time and effort into improving this! I was looking into the alpha and I like it so far but I'll have to find more time to test it with more complicated use cases.

My pleasure. Thanks for your support.

tilanka commented 5 years ago

You can try the alpha, report missing use cases, write unit tests, or find bugs! … On Aug 5, 2019, 2:05 AM -0600, Daniel Rech @.***>, wrote: This post has been open for a while. What can I do to get V7 released? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

Have been using this recently and thanks for all the effort you've put into this. One use case that I think is useful is a control that gives the user the ability to toggle columns off/on. This is especially useful on mobiles and smaller screens. This could be achieved via a plugin hook in the new architecture.

Was wondering if there is already anything in the pipeline like this?

gary-menzel commented 5 years ago

@tilanka The previous version (V6) did have the ability hide/show columns - assuming your column definitions were reactive or in your state management (so any change to the column definitions would cause a refresh). This is no different in V7 (although, hooks likely make the reactivity a little simpler).

Each column has a property on it that allows it to be shown or hidden (show: Boolean | Function). It is up to the developer to implement the UI for accomplishing changing/setting this (as each use case as to how best to do it needs to fit in with the design of the UI). react-table V7 is "headless" - meaning it actually doesn't product any markup - that is the developers responsibility.

I have you haven't yet done so, a read of the README on the code page will make this a little clearer as well as having a look at the V7 sandbox code examples. Although, there is probably no specific example of doing this at present.

nouman91 commented 5 years ago

Can I use version 7 for production application? Thank you for this awesome library. I loved the concept you can easily integrate it into any ui library. I am thinking to use this in production application. We have 4 to 5 core pages and each page has data grid. I am thinking to use this to solve all the client requirements. I see v7 is in active development. Is v7 stable?

nouman91 commented 5 years ago

Can I use version 7 for production application? Thank you for this awesome library. I loved the concept you can easily integrate it into any ui library. I am thinking to use this in production application. We have 4 to 5 core pages and each page has data grid. I am thinking to use this to solve all the client requirements. I see v7 is in active development. Is v7 stable?

@tannerlinsley I know you must be busy brother but would appreciate a reply. I am in a bit of hurry, my team did not do a good enough job with data tables, and I have to improve them in this sprint.

jackpope commented 5 years ago

@nouman91 Works great in production for me just make sure to lock your version as the alpha patch changes can be breaking.

nouman91 commented 5 years ago

Thank you for your response @jackpope . But I see it is not stable. I used pagination with sorting, it is not working with it. Somehow it gets stuck into infinite render loop. I guess I have to create data table from scratch.

powah commented 5 years ago

Looks like it's not possible to use useRowSelect together with server side (manual) pagination because data in that case is only the current page and you get same row indexes (paths) for all pages so if you go to the next page - same row indices are incorrectly preselected.

tannerlinsley commented 5 years ago

Looks like it's not possible to use useRowSelect together with server side (manual) pagination because data in that case is only the current page and you get same row indexes (paths) for all pages so if you go to the next page - same row indices are incorrectly preselected.

Looks like we need a manual row index override for rows. This way you can provide the true row indices from the server, instead of relying on the manufactured ones. Thoughts? Also, please open a new issue to discuss this.

tannerlinsley commented 5 years ago

Closing this issue now, as it's getting pretty long and probably pinging a lot of people. If you have more feedback or questions, please file individual issues for them from here on out.

Thank you everyone!

TanStack / table

v7 Feedback & Ideas #1252