Reactabular/reactabular

Spectacular tables for React.js (MIT)

Juho Vepsäläinen

@bebraw

@priley86 i think one approach would be to try to wire react-virtualized or react-window (much simpler) using the provided hooks. you should be able to override table rendering through the current interface

i would try wiring react-window

atm i'm pretty busy with React Finland and that takes most of my time

Patrick Riley

@priley86

thanks a lot @bebraw :thumbsup:

Steve O'Keefe

@NLSteveO

Hi, I'm having trouble getting the sorting order number to show up in my column headers, is there a trick to it for it to work? Or what could I be missing? Any tips or advice to point me in some direction is appreciated.

Juho Vepsäläinen

@bebraw

@NLSteveO i would check the official example carefully. if you can set up a codesandbox or something, i can have a closer look later

Steve O'Keefe

@NLSteveO

ok thanks

Juho Vepsäläinen

@bebraw

usually the apis are tiny and decoupled so maybe you can examine the header case in isolation somehow

Vera Lyalko

@veralyalko_twitter

How can I make first cell of each row to be a <TH>? Currently it is rendered as <TD>. Is there a way to transform that? Thanks

Juho Vepsäläinen

@bebraw

@veralyalko_twitter likely https://reactabular.js.org/#/table/overriding-default-renderers

i hope that helps :)

rapidvikramv

@rapidvikramv

I'm learning to implement the reactabular (all-features) to my existing react code.

From the examples I see two lines
import {
Paginator, PrimaryControls, generateRows, paginate
} from './helpers';
import countries from './data/countries';

From where can I get to see the helpers file and also the countries file.

Juho Vepsäläinen

@bebraw

@rapidvikramv https://github.com/reactabular/reactabular/tree/master/docs

likely the helpers would have to become a package of their own

Kirill Klimenko

@mudrila

Hello, guys!
Anybody here?

Juho Vepsäläinen

@bebraw

yup

i noticed you resolved your issue :+1:

i've been quite busy this year so i haven't had time to focus on the lib

but i think now that react has hooks, there could be some chance for a great simplification

i also went all-in with typescript so typing the lib would be great too

it's more about time/money at this point. i have to give income generating dev higher priority atm

Andres9888

@Andres9888

Hi, I had a question. My question might be simple but I have been stuck on it for a while. I am using a table where I have logic inside the columns definition. One of the logic is converting the data I get from one of the cells but my problem is the logic runs the first time but doesn't run again when I refresh. I have tired Table
Overriding shouldComponentUpdate that you have but I havn't been able to get it to work. Let me know if you have an guidance or suggestions. I also understand you are busy so I will try to have a link to the code to make it easier for you. I also have one more problem but it is basically boilers down to getting cells rendering when state changes . Thank you ahead of time for any help. I will try to get you a link as quick as possible.

Juho Vepsäläinen

@bebraw

@Andres9888 yeah, much easier to resolve if i get a simple example to run. simplify as much as possible :)

it definitely sounds like SCU

Chen Bin

@redguardtoo

@Andres9888 , the row is re-rendered if and only if the row data is changed. The table re-render might not trigger the re-rendering of specific row if that row's data stays same.

Sourabh K

@sourabhlk

@bebraw Hi , had a question.. Some confusion in formatters and transforms. I have a formatter fn whose value depends on the corresponding rows values. But i want to make it editable too. I have tried adding a calcfn which calculates its value based on corrensponding row values and a editable for it. But currently only the cell is becoming editable but it doesnt has any value.. means formatter is not getting executed. what is the issue or what may be the soln..? Thanks..

Juho Vepsäläinen

@bebraw

@sourabhlk can you set up an example (codesandbox or so)? it's hard to say otherwise

the official docs might have something more complicated somewhere too

https://reactabular.js.org/#/examples/excel is doing something a bit more

and https://github.com/reactabular/react-edit#readme has the editing logic

samthecarman

@samthecarman

Hi, Thanks for the library, it's awesome! I have a question. In the CRUD example, for the Active column, if I click on a row and then click down a row without selecting, the edit view on the first row does not get removed. How would I get the edit view removed when selecting another field to edit on a different row?

Juho Vepsäläinen

@bebraw

@samthecarman hi, i've been busy with travel (not a lot of time to respond). what you described sounds like an issue in my state management (editing state doesn't get reset)

@samthecarman editable(edit.boolean()) - my bet the issue is in edit.boolean

Juho Vepsäläinen

@bebraw

check https://github.com/reactabular/react-edit/blob/master/src/edit.js - isEditing(extraParameters) feels weird

i think if i wrote the lib now, i would drop most of the abstractions and use hooks for bits where it makes sense

but i would say the design aged well - now headless components have become trendy

Mario Contreras

@marioacc

Hi! Thank you in advance for the development of the table, it has been incredible helpful for our team!

Juho Vepsäläinen

@bebraw

@marioacc great to hear! if there's anything specific to add or change, i would be open to contract (my current contract is near the end). there are some PRs to merge and we could wrap the API behind hooks

the design has lasted the time quite well. there are some things i would alter but not much

one of the main things i would try is to integrate react-window through hooks to get easy and efficient virtualization

virtualization included in reactabular doesn't do absolute positioning so it's less performant. i don't know what's the current limit on that, though

Mario Contreras

@marioacc

I have a question related to the implementation of the Virtualized table. I followed the second example in the virtualized feature guide, however Im getting the error body.getRef(...).getRef is not a function

Thank you very much for the heads up @bebraw! The integration with hooks would be terrific!

Right now I only have that question related to the implementation of the virtualized table though. I have been looking through the internet and I haven't found someone with my problem ☹️ I'm guessing there must be something really foolish I'm forgetting about

However, I'm not sure if this is the right channel to ask this kind of questions

Juho Vepsäläinen

@bebraw

@marioacc can you open issues with code examples so it's easy to debug? thanks

likely the best bet is to compare with the official example and dive into the codebase to see what it's doing

the ref handling part is somehow tricky

Where communities thrive

People

Repo info

Activity