KevinVandy/material-react-table

enableClickToCopy only on normal cells and not on AggregatedCell

tmax22 opened this issue · 4 comments

material-react-table version

2.13.0

react & react-dom versions

react 18

Describe the bug and the steps to reproduce it

in our case the AggregatedCell is used to render a button, and the regular cells in this row is copiable text.

so we get
Warning: validateDOMNesting(...): <button> cannot appear as a descendant of <button>.

because we cant enable enableClickToCopy only on normal cells.

Minimal, Reproducible Example - (Optional, but Recommended)

const columns = useMemo<MRT_ColumnDef<Row>[]>(
    //column definitions...
    () => {
      return [
      ...
        {
          accessorKey: "permission",
          header: "Permissions",
          enableClickToCopy: true,
          Edit: ...
          AggregatedCell: (ctx) => {
            ...
            return (
              <>
              ...
                    <IconButton slot={""}
                      onClick={() => {
                        setState("add");
                      }}
                    >
                      <AddLinkIcon />
                    </IconButton>
          
             ...
              </>
            );
          },
        },
      ...
      ];
    },
    [permissionsRows, action2Permissions, 
   dependencies],
  );

Screenshots or Videos (Optional)

image

Do you intend to try to help solve this bug with your own PR?

None

Terms

  • I understand that if my bug cannot be reliably reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

update: fixed it on my side here by adding custom check
showClickToCopyButton && columnDef.enableClickToCopy !== false && !customIsAggregated when customIsAggregated is defined by

const customIsAggregated =
    !cell.getIsGrouped() && !cell.getIsPlaceholder() && row.depth === 0;

@KevinVandy I see you marked this issue as completed. For clarification on this comment, I implemented the change on my own fork. I believe this should be configurable without a fork, which is why I opened this issue.

This could be achieved by changing enableClickToCopy to accept boolean | { normalCell: boolean, aggregatedCell: boolean, ... } instead of just boolean.

This can apply to other features besides enableClickToCopy. Currently, there is no way to enable features on special cells; they are either enabled on all cells or none.

Please mark this issue as "Not Planned" or re-open it.

The enableClickToCopy already accepts a callback function @tmax22

How about

enableClickToCopy: (cell) => !cell.getIsAggregated()

image

oh, nice one. sorry about it 🫠