Datagrid, issues with inlineEdit and nested rows

[Billzg13]

Datagrid issues with inline Edit and nested rows

packages

"dependencies": {
  "@carbon/charts": "1.6.1",
  "@carbon/charts-react": "1.6.1",
  "@carbon/ibm-products": "2.0.0-rc.10",
  "@carbon/react": "1.19.0",

1. I can't use inline edit if the datagrid has a column that takes Date.

If I have date data I have to add inlineEdit on the column or the datagrid won't render at all, example:

{
        Header: "Updated",
        accessor: "updated"
inlineEdit: {
    type: 'date',
    inputProps: {
      // optionally pass props here to be passed through to Carbon's DatePicker component
      onChange: (newDateObj, cell) => {
        console.log(newDateObj, cell);
      },
      labelText: 'Change active since date',
      // optionally pass props here to be passed through to Carbon's DatePickerInput component
      datePickerInputProps: {
        labelText: 'Change active since date',
      },
    },
  },
}

2. I can't use nestedRows and useSelect at the same time, the selection of rows is all wrong.

sandbox: https://codesandbox.io/s/clever-wright-x794tj?file=/src/Example/Example.js

3. I can't render the datagrid at all if I try to use these 2 hooks

useNestedRows
useInlineEdit

sandbox: https://codesandbox.io/s/compassionate-albattani-rf24dw?file=/src/Example/Example.js:1557-1593

What package(s) are you using?

• [x] Carbon for IBM Products (or Carbon for IBM Cloud & Cognitive)
• [ ] Legacy/CDAI
• [ ] Legacy/Security

[elycheea]

@Billzg13 Thanks for reaching out on these. Tagging @AlexanderMelox @Ratheeshrajan on the figure issue related to date since they’ve both done some work related to it.

For items 2 and 3, we’ll likely need to reach out to discuss further with the designers on how to approach these.

[AlexanderMelox]

1. I can't use inline edit if the datagrid has a column that takes Date. If I have date data I have to add inlineEdit on the column or the datagrid won't render at all, example:

I would use the Cell property to render the date into react. Here's an example of it. https://github.com/carbon-design-system/ibm-cloud-cognitive/blob/05c8bad8607fcab4b98ee467ceaae0d27f869844/packages/cloud-cognitive/src/components/Datagrid/Extensions/Filtering/Filtering.stories.js#L116

{
        Header: "Updated",
        accessor: "updated"
        Cell: ({ cell: { value } }) => <span>{value.toLocaleDateString()}</span>,
}

value in this case is a Date object

[Billzg13]

hey @AlexanderMelox I already tried with Cell and the datagrid still doesn't render if I include useInlineEdit hook

[Ratheeshrajan]

@Billzg13 Could you please have a look at the following code sandbox https://codesandbox.io/s/cold-violet-qlj6t9?file=/src/Example/Example.js

updated: new Date("2022-02-17").toLocaleDateString()

[Billzg13]

@Ratheeshrajan your sandbox looks good, I guess we can consider the 1. part of this bug as completed.

Thanks

[elycheea]

@Billzg13 Can you open part 2 as a separate issue for us? You can include the link for the existing CodeSandbox.

For part 3, can you share the designs for this in #ibmproducts-pal — we’d like to better understand the case using these two hooks together and would recommend we discuss this one further with design.

[Billzg13]

Hey @elycheea sorry for the delayed response, where are we with bugs 2 and 3? Should I make 2 new issues and close this ?

[elycheea]

@Billzg13 Yes, let’s create a new issue for the bug 2. We currently recommend against using nested rows with editable cells for an optimal user experience so would recommend bringing that discussion up with your designers first.

[elycheea]

Feel free to close this issue once you create the new one.

[elycheea]

Closing in favor of #3546