This issue was moved to a discussion.
You can continue the conversation there. Go to discussion →
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Row inline edits #79
Comments
I'll think about it, but I'm not sure it's feasible. The row rendering logic is quite complex. However, this is an excellent idea:
Thanks for the suggestion! I think adding row indexes to handlers would prove useful in many possible scenarios. |
I know it's not exactly what you're asking for, but have a look at the row expansion feature. |
Hi all, I was able to implement a sort inline edit, by using a |
in short, I'm using something like ...
<DataTable
withBorder
borderRadius="md"
highlightOnHover
withColumnBorders
onRowClick={(_, rowIndex) => setSelectedRow(rowIndex)}
columns={[
{
accessor: "type",
width: 110,
render: (item: ItemForm) => {
const index = item.index || 0;
return (
<ItemTypePicker
key={`datatable-type-${index}`}
editable={selectedRow === index}
label={null}
{...form.getInputProps(`items.${index}.type`)}
/>
);
},
},
... but it doesn't help, I mean, the |
Update: currently, the only way to handle any editable input inside a cell is by using a controlled component. That's because if you update the value by using |
@gfazioli Related to your question above, I think it would be best if you could only render an |
@icflorescu yep, would be a great alternative instead of using the |
Let me explain what I suggested, once I had implemented an editable row with React Table Hook v8. Overall UI pattern looked something like below... The benefit of doing this way, table column schema can be separated entirely from the column UI itself. Improves the separation of concerns.
Then I passed the RowUI to DataTable as prop.
The Row UI prop was provided to At the end, it looked something like this... |
@icflorescu - please let me know what you think. if you like this approach, I might help with a PR. |
At a glance, it seems like a solid idea to me. More separation of concerns is always good. It seems like it could potentially break a bunch of stuff though, so any PR would have to be very thoroughly tested. |
This issue was moved to a discussion.
You can continue the conversation there. Go to discussion →
Is your feature request related to a problem? Please describe.
The DataTable component does not support inline row edits. Inline edits are more desirable for enterprise-based applications. We can currently use the render props for each field separately. This is a length and code repetition that cannot be avoided. We always need to find an index to edit a row and update the state based on the current implementation.
Describe the solution you'd like
I would like to request a pattern where we can provide a RowComponent that implements the conditional logic if the row is being edited and renders the editable Row otherwise renders the default UI. It will be also best if we can get the row indexes as well with all event handlers so that we do not always iterate over the rows to find indexes.
Describe alternatives you've considered
Currently using render props to render editable UI vs Fixed UI.
The text was updated successfully, but these errors were encountered: