Dataの定義

このデータの場合

//TData
type User = {
  firstName: string
  lastName: string
  age: number
  visits: number
  progress: number
  status: string
}

// Data
export const data:User = [
  {
    "firstName": "Tanner",
    "lastName": "Linsley",
    "age": 33,
    "visits": 100,
    "progress": 50,
    "status": "Married"
  },
  {
    "firstName": "Kevin",
    "lastName": "Vandy",
    "age": 27,
    "visits": 200,
    "progress": 100,
    "status": "Single"
  }
]

上記のようにデータに対して型定義をしてあげればテーブルデータ使用時に型推論の恩恵を受けることができる

この型はTanstackTableではTDataと呼ばれている

他にも以下のようにすることもできる

const data: User[] = [] // 上記のものと同様

const [data, setData] = React.useState<User[]>([])

ネストされたデータの場合

type User = {
  name: {
    first: string
    last: string
  }
  info: {
    age: number
    visits: number
  }
}

export const data:User = [
  {
    "name": {
      "first": "Tanner",
      "last": "Linsley"
    },
    "info": {
      "age": 33,
      "visits": 100,
    }
  },
  {
    "name": {
      "first": "Kevin",
      "last": "Vandy"
    },
    "info": {
      "age": 27,
      "visits": 200,
    }
  }
]

columns定義の際にaccessorFnを使用し、infoから取得可能。型推論もできる。

accessorKeyを使用してドットで繋いで記載(ディープキー)することも可能であるが、型の恩恵は得られない。

※columnsについては後述

※accessorKeyは通常なんでも問題ないが、ドットがあるとディープキーと解釈されてエラーになってしまうから注意

const columns = [
  {
    header: 'First Name',
    accessorKey: 'name.first',
  },
  {
    header: 'Last Name',
    accessorKey: 'name.last',
  },
  {
    header: 'Age',
    accessorFn: info => info.age, 
  },
  //...
]

データは安定していないといけない

ReactでTanstack Tableを使用する場合、無限レンダリングが起こってしまう可能がある

そのため、useMemoやuseStateを使用してデータを安定させる必要がある

※Server Actionsでデータを取得する場合は例外。取得したデータをそのまま渡しても問題ない

export default function MyComponent() {
  //😵 BAD: コンポーネント内で定義すると、レンダリングのたびに再定義されてしまい、無限ループを起こす
  const columns = [
    // ...
  ];

  //😵 BAD: columnsと同様
  const data = [
    // ...
  ];

  //❌ 安定していないdataやcolumnsを渡してしまうと無限ループになる。data,columnsはuseReactTableと同じスコープでは定義しない
  const table = useReactTable({
    columns,
    data ?? [], //❌ Also bad because the fallback array is re-created on every render
  });

  return <table>...</table>;
}

const fallbackData = []

export default function MyComponent() {
  //✅ GOOD: This will not cause an infinite loop of re-renders because `columns` is a stable reference
  const columns = useMemo(() => [
    // ...
  ], []);

  //✅ GOOD: This will not cause an infinite loop of re-renders because `data` is a stable reference
  const [data, setData] = useState(() => [
    // ...
  ]);

  // Columns and data are defined in a stable reference, will not cause infinite loop!
  const table = useReactTable({
    columns,
    data ?? fallbackData, //also good to use a fallback array that is defined outside of the component (stable reference)
  });

  return <table>...</table>;
}