mardi 7 février 2023

Checkbox Default Checked in React table is not working

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 First Image with subRow

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

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.




Aucun commentaire:

Enregistrer un commentaire