[TanStack Table] 체크 박스 만들기

https://tanstack.com/table/v8

TanStack Table | React Table, Solid Table, Svelte Table, Vue Table

 

체크 박스를 선택하고, 선택된 체크박스에서 Hash 를 반환해줘야하는 상황일 때

import { useState } from 'react';

// ... 이전 코드 ...

const ExampleComponent = () => {
  const [selectedUrlHash, setSelectedUrlHash] = useState<string | null>(null);

  const handleCheckboxChange = (urlHash: string) => {
    setSelectedUrlHash(urlHash);
  };

  // ... 이전 코드 ...

  const relColumnDefs: ColumnDef<IUrlContent>[] = [
    {
      header: '',
      accessorKey: 'urlHash', // Assuming urlHash is a unique identifier
      size: 5,
      minSize: 5,
      maxSize: 5,
      enableSorting: false,
      cell: ({ row }) => {
        const {
          original: { urlHash },
        } = row;
        return (
          <input
            type="checkbox"
            checked={urlHash === selectedUrlHash}
            onChange={() => handleCheckboxChange(urlHash)}
          />
        );
      },
    },
    // ... 나머지 열 정의 ...
  ];

  // ... 이전 코드 ...
};

export default ExampleComponent;

 

return 에서 checkbox 항목을 추가하고,

체크 박스 변경 이벤트를 handleCheckboxChange에 연결,

selectedUrlHash 상태에 저장된 URL Hash 를 기반으로 값을 반환할 수 있다.