useEditableCell and cell style wrap cannot co-exist on the same Datagrid component.

[pywang122]

Package

Carbon for IBM Products

Description

I am using the Datagrid component. I have one editable column and one column in which I want to put a highlight color on the cell text. However, the highlight color doesn't work with the following code:

Cell: ({ cell: { value } }) => {
          return (
            <div>
              <span className="text-bg-color-green">{value}</span>
            </div>
          );
        },

After I removed the useEditableCell hook, the coloring works, but I cannot edit the editable cells anymore.

Component(s) impacted

Datagrid

Browser

Chrome, Firefox

@carbon/ibm-products (previously @carbon/ibm-cloud-cognitive) version

v2.48.0

Suggested Severity

Severity 2 = Aspects of design is broken, and impedes users in a significant way, but there is a way to complete their tasks. Affects major functionality, has a workaround.

Product/offering

PowerVS

CodeSandbox or Stackblitz example

https://stackblitz.com/edit/github-nqwkhm?file=src%2FExample%2FExample.jsx,src%2Findex.scss,src%2FThemeSelector%2F_theme-dropdown.scss

Steps to reproduce the issue (if applicable)

In the Example.jsx provided in the codeSandbox, make one column editable and column with cell wrap:

import {
  Datagrid,
  useDatagrid,
  useStickyColumn,
  useEditableCell,
} from '@carbon/ibm-products';
import { makeData } from './utils/makeData';

const defaultHeader = [
  {
    Header: 'Row Index',
    accessor: (row, i) => i,
    sticky: 'left',
    id: 'rowIndex', // id is required when accessor is a function.
  },
  {
    Header: 'First Name',
    accessor: 'firstName',
    Cell: ({ cell: { value } }) => {
      console.log('value:', value);
      return (
        <div>
          <span className="text-color-green">{value}</span>
        </div>
      );
    },
  },
  {
    Header: 'Last Name',
    accessor: 'lastName',
  },
  {
    Header: 'Age',
    accessor: 'age',
    width: 50,
    inlineEdit: {
      type: 'number',
      inputProps: {
        onBlur: (event) => console.log('value:', event.target.value),
      }, // These props are passed to the Carbon component used for inline editing
    },
  },
  {
    Header: 'Visits',
    accessor: 'visits',
    width: 60,
  },
  {
    Header: 'Someone 1',
    accessor: 'someone1',
  },
  {
    Header: 'Someone 2',
    accessor: 'someone2',
  },
  {
    Header: 'Someone 3',
    accessor: 'someone3',
  },
  {
    Header: 'Someone 4',
    accessor: 'someone4',
  },
  {
    Header: 'Someone 5',
    accessor: 'someone5',
  },
  {
    Header: 'Someone 6',
    accessor: 'someone6',
  },
  {
    Header: 'Someone 7',
    accessor: 'someone7',
  },
  {
    Header: 'Someone 8',
    accessor: 'someone8',
  },
  {
    Header: 'Someone 9',
    accessor: 'someone9',
  },
  {
    Header: 'Someone 10',
    accessor: 'someone10',
  },
];
const dummy = () => {
  console.log('on update....');
};
export const Example = () => {
  const columns = React.useMemo(
    () => [
      ...defaultHeader,
      {
        Header: 'Someone 11',
        accessor: 'someone11',
        multiLineWrap: true,
        sticky: 'right',
        Cell: ({ cell: { value } }) => {
          return (
            <div>
              <span className="text-bg-color-green">{value}</span>
            </div>
          );
        },
      },
    ],
    []
  );
  const [data] = useState(makeData(10));
  const datagridState = useDatagrid(
    {
      columns,
      data,
      onDataUpdate: dummy,
    },
    useStickyColumn,
    useEditableCell
  );

  return <Datagrid datagridState={{ ...datagridState }} />;
};

export default Example;

Run it and the cell wraps on "First Name" and "Someone 11" won't take effect.
Then remove "useEditableCell" hook and the cell wraps will take effect.

Release date (if applicable)

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate issues

[matthewgallo]

Hey @pywang122, yes that is correct. The useEditableCell hook does not currently allow for custom cell rendering. Our team is looking into some explorations using @tanstack/react-table (the next major version of react-table) and we'll be sure to include this functionality as a use case that teams are looking for.

This may be achievable in the current Datagrid via some custom styling. Can you explore that as a potential solution?

[github-actions]

This issue is stale because it has been open for 7 days with no activity.
Remove the stale label or add a comment, otherwise this issue will be closed in 7 days.