Data

Tables start with your data. The column definitions and rows will depend on the shape of your data. QUI Table includes TypeScript features that can infer the shape of your data and ensure your column definitions are accurate.

Defining Data Types

Data is an array of objects that will be turned into the rows of your table. Each object in the array represents a row of data (under normal circumstances). If you are using TypeScript, we usually define a type for the shape of our data. This type is used as a generic type for all the other table, column, row, and cell instances.

For example, if we have a table that displays a list of users in an array like this:

;[
  {
    firstName: "Tanner",
    lastName: "Linsley",
    age: 33,
    visits: 100,
    progress: 50,
    status: "Married",
  },
  {
    firstName: "Kevin",
    lastName: "Vandy",
    age: 27,
    visits: 200,
    progress: 100,
    status: "Single",
  },
]

Then we can define a User type like this:

interface User {
  firstName: string
  lastName: string
  age: number
  visits: number
  progress: number
  status: string
}

We can then define our data array with this type, and then QUI Table will be able to intelligently infer lots of types for us later on in our columns, rows, headers, and cells. Whatever you pass to the data table option will become the data type for the rest of the table instance.

Give Data a Stable Reference

CAUTION

The data array that you pass to the table instance MUST have a stable reference to prevent bugs that cause infinite re-renders (especially in React).

import {useEffect, useMemo, useState} from "react"
import {useReactTable} from "@qui/react-table"

const fallbackData = []

export function MyTable() {
  //✅ 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 an infinite loop!
  const table = useReactTable({
    columns,
    // also good to use a fallback array that is defined
    // outside the component (stable reference)
    data: data ?? fallbackData,
  })

  return <QTable>...</QTable>
}

Column Definitions

Table State