Checkbox Default Checked in React table is not working

Question

I want to mark the checkbox checked inside a subComponent with the help of forwardref but i am not getting the result. I have tried defaultChecked = {true} defaultValue = {true} inside input field but didn't succeed.

Here is the checkbox component

import { forwardRef, useEffect, useRef } from "react";

export const SubRowsCheckBox = forwardRef(({ indeterminate, ...rest }, ref) => {
  const defaultRef = useRef();
  const resolvedRef = ref || defaultRef;

  useEffect(() => {
    resolvedRef.current.defaultChecked = true
    resolvedRef.current.indeterminate = indeterminate;
  }, [resolvedRef, indeterminate]);

  return (
    <>
      <div class="flex items-center">
        <input
          type="checkbox"
          ref={resolvedRef}
          {...rest}
          id="A3-yes"
          name="A3-confirmation"
          class="opacity-0 absolute h-8 w-8"
        />
      </div>
    </>
  );
});

This is how I called the checkbox Component.

= useTable(
    {
      columns,
      data,
      state : {expanded},
    },
    useExpanded,
    useRowSelect,
    (hooks) => {
      hooks.visibleColumns.push((columns) => {
        return [
          ...columns,
          {
            Header: "Choose Items",
            id: "selection",
            Cell: ({ row }) => (
              (details.isSelected) ? ( 
              <div>
                <SubRowsCheckBox  {...row.getToggleRowSelectedProps() }  />
              </div>
            ) : ( null 
            )
            ),
          },
        ];
      });
    }
    
 
  )

The component is rendered only if row has got some subRows. I have also tried resolvedRef.current.checked = true. It marks the checkbox checked but it doesn't works for the all rows. Here are the results

These are the results of resolvedRef.current.checked = true. The defaultChecked prop isn't changing anything.

Any kind of help will be highly appreciated.

I want to mark all the subrows checkbox checked for the first render and rest of it works fine.

Answer 1

React Table v7 has a lot of nice configurations. You can handle the initialState of your rows and subrows next to where you pass in columns and data.

To prevent unchecking boxes when deselecting a row, you'll need to set the autoResetHiddenColumns flag to `false.

To set some initial row and sub-rows as checked, you'll need to use the initialState object. It contains some optional properties: expanded and selectedRowIds. You'll notice the child-rows have decimal values for their keys.

{
  columns,
  data,
  autoResetHiddenColumns: false,
  initialState: {
    expanded: {
      0: true
    },
    selectedRowIds: {
      0: true,
      "0.0": true,
      0.1: true,
      0.2: true
    }
  }
},

Now you should see the 1st row and it's 3 child-rows selected by default. When you expand the 2nd row and check the row-box, all 3 child-rows are expanded - the 1st row and it's 3 child-rows should remain unaffected.