Cells

API

• Cell

Overview

Cells come from Rows. Use row instance APIs to retrieve cells based on the features you are using. Typically, you would use row.getAllCells or row.getVisibleCells (if using column visibility features). Other APIs are also available.

<QTbody>
  {table.getRowModel().rows.map((row) => (
    <QTr key={row.id}>
      {row.getVisibleCells().map((cell) => (
        <QTd key={cell.id}>
          {flexRender(cell.column.columnDef.cell, cell.getContext())}
        </QTd>
      ))}
    </QTr>
  ))}
</QTbody>

• Each cell object can be associated with a <td> or similar cell element in your UI. Cell objects have properties and methods to interact with table state and extract cell values based on the table's state.
• Every cell object has an id property, unique within the table instance. Each cell.id is a combination of its parent row and column IDs, separated by an underscore.

Cell Rendering

Access data values from a cell using cell.getValue or cell.renderValue APIs. Both cache the results of accessor functions for efficient rendering. The difference is that cell.renderValue returns either the value or the renderFallbackValue if the value is undefined, while cell.getValue returns the value or undefined if the value is undefined.

import {flexRender} from "@qui/react-table"

const columns = [
  {
    accessorKey: "firstName",
    cell: ({cell, row}) => {
      return <div>{cell.getValue()}</div>
    },
  },
]
// ...

<QTr key={row.id}>
  {row.getVisibleCells().map((cell) => (
    <QTd key={cell.id}>
      {flexRender(cell.column.columnDef.cell, cell.getContext())}
    </QTd>
  ))}
</QTr>