Option to disable row selection for subRows.

[GuptaSiddhant]

I am working on table which has some parent rows and numerous children rows (subRows) to each parent. Though, these subRows should not be selectable as they are read-only.

I started working with react-table useRowSelect example. I provided a prop.disableSubRowSelect which is boolean to my component. I used that to hide checkboxes in the rows which have depth > 0.

hooks => {hooks.visibleColumns.push((columns) =>[ 
  {
        id: "selection",
        width: 40,
        // eslint-disable-next-line react/display-name
        Header: (row) => <Checkbox {...row.getToggleAllRowsSelectedProps()} />,
        // eslint-disable-next-line react/display-name
        Cell: ({ row }) =>
          props.disableSubRowSelect && row.depth > 0 ? null : (
            <Checkbox {...row.getToggleRowSelectedProps()} />
          ),
  },
...columns
]}

This along with selectSubRows: !disableSubRowSelect useTable prop, I could get users to not see the checkbox and not select the subRow when selecting the parent.

But the difficult problem was to make Select/deselect all work. row.getToggleAllRowsSelectedProps() still selected all rows and subRows which was not good since I have to display count of selected rows and selectedFlatRows grow in size.

The only way I saw was to change the functionality of row.getToggleAllRowsSelectedProps. Essentially I am checking isSelected on each row (which are all parent rows) and determining the action.

if (props.disableSubRowSelect)
 hooks.getToggleAllRowsSelectedProps = [
      (props, { instance }) => [
        props,
        {
          onChange: () => {
            instance.rows.forEach((row) =>
              row.toggleRowSelected(
                !instance.rows.every((row) => row.isSelected)
              )
            );
          },
          style: {cursor: "pointer"},
          checked: instance.rows.every((row) => row.isSelected),
          title: "Toggle All Rows Selected",
          indeterminate: Boolean(
            !instance.isAllRowsSelected &&
              Object.keys(instance.state.selectedRowIds).length
          ),
        },
      ],
    ];

My question : Is this the best/only way to achieve what I want or am I missing some native functionality? Will there be a performance issue (slower that using default getToggleAllRowsSelectedProps) ?

[tyteen4a03]

Bump

[yusufkoca]

I have a similar situation where some of the rows are disabled. When the user clicks the select all button, I do not want those disabled rows to be selected. I could not find a decent way to do that, so I probably will override the getToggleAllRowsSelectedProps function too as @GuptaSiddhant did.

[this-is-r-gaurav]

I am working on table which has some parent rows and numerous children rows (subRows) to each parent. Though, these subRows should not be selectable as they are read-only.

I started working with react-table useRowSelect example. I provided a prop.disableSubRowSelect which is boolean to my component. I used that to hide checkboxes in the rows which have depth > 0.

hooks => {hooks.visibleColumns.push((columns) =>[ 
  {
        id: "selection",
        width: 40,
        // eslint-disable-next-line react/display-name
        Header: (row) => <Checkbox {...row.getToggleAllRowsSelectedProps()} />,
        // eslint-disable-next-line react/display-name
        Cell: ({ row }) =>
          props.disableSubRowSelect && row.depth > 0 ? null : (
            <Checkbox {...row.getToggleRowSelectedProps()} />
          ),
  },
...columns
]}

This along with selectSubRows: !disableSubRowSelect useTable prop, I could get users to not see the checkbox and not select the subRow when selecting the parent.

But the difficult problem was to make Select/deselect all work. row.getToggleAllRowsSelectedProps() still selected all rows and subRows which was not good since I have to display count of selected rows and selectedFlatRows grow in size.

The only way I saw was to change the functionality of row.getToggleAllRowsSelectedProps. Essentially I am checking isSelected on each row (which are all parent rows) and determining the action.

if (props.disableSubRowSelect)
 hooks.getToggleAllRowsSelectedProps = [
      (props, { instance }) => [
        props,
        {
          onChange: () => {
            instance.rows.forEach((row) =>
              row.toggleRowSelected(
                !instance.rows.every((row) => row.isSelected)
              )
            );
          },
          style: {cursor: "pointer"},
          checked: instance.rows.every((row) => row.isSelected),
          title: "Toggle All Rows Selected",
          indeterminate: Boolean(
            !instance.isAllRowsSelected &&
              Object.keys(instance.state.selectedRowIds).length
          ),
        },
      ],
    ];

My question : Is this the best/only way to achieve what I want or am I missing some native functionality? Will there be a performance issue (slower that using default getToggleAllRowsSelectedProps) ?

A Little Correction, because instance.rows.every() on empty rows will return true, and with Pagination getToggleRowSelected is available only on visible rows, remaining rows wont have toggleRowSelected in v7.7.0:

hooks.getToggleAllRowsSelectedProps = [
      (props, { instance }) => [
        props,
        {
          onChange: () => {
            instance.rows.forEach((row) =>
              if(row.toggleRowSelected)
                row.toggleRowSelected(
                  !instance.rows.every((row) => row.isSelected)
                )
            );
          },
          style: {cursor: "pointer"},
          checked: instance.rows.every((row) => row.isSelected),
          title: "Toggle All Rows Selected",
          indeterminate: Boolean(
            !instance.isAllRowsSelected &&
              Object.keys(instance.state.selectedRowIds).length
          ),
        },
      ],
    ];

or better to use page instead of rows in case of pagination

hooks.getToggleAllRowsSelectedProps = [
      (props, { instance }) => [
        props,
        {
          onChange: () => {
            instance.page.forEach((row) =>
                row.toggleRowSelected(
                  !instance.page.every((row) => row.isSelected)
                )
            );
          },
          style: {cursor: "pointer"},
          checked: instance.page.every((row) => row.isSelected),
          title: "Toggle All Rows Selected",
          indeterminate: Boolean(
            !instance.isAllRowsSelected &&
              Object.keys(instance.state.selectedRowIds).length
          ),
        },
      ],
    ];