Qwik 表格

@tanstack/qwik-table 适配器是核心表格逻辑的包装器。它的绝大部分工作都与以“Qwik 方式”管理状态、提供类型以及单元格/表头/表尾模板的渲染实现有关。

导出

@tanstack/qwik-table 重新导出了 @tanstack/table-core 的所有 API 以及以下内容：

useQwikTable

接受一个 options 对象，并返回一个 Qwik Store 表格，其中包含 NoSerialize。

import { useQwikTable } from '@tanstack/qwik-table'

const table = useQwikTable(options)
// ...render your table

import { useQwikTable } from '@tanstack/qwik-table'

const table = useQwikTable(options)
// ...render your table

flexRender

一个用于渲染带有动态值的单元格/表头/表尾模板的实用函数。

示例

jsx

import { flexRender } from '@tanstack/qwik-table'
//...
return (
  <tbody>
    {table.getRowModel().rows.map(row => {
      return (
        <tr key={row.id}>
          {row.getVisibleCells().map(cell => (
            <td key={cell.id}>
              {flexRender(cell.column.columnDef.cell, cell.getContext())}
            </td>
          ))}
        </tr>
      )
    })}
  </tbody>
);

import { flexRender } from '@tanstack/qwik-table'
//...
return (
  <tbody>
    {table.getRowModel().rows.map(row => {
      return (
        <tr key={row.id}>
          {row.getVisibleCells().map(cell => (
            <td key={cell.id}>
              {flexRender(cell.column.columnDef.cell, cell.getContext())}
            </td>
          ))}
        </tr>
      )
    })}
  </tbody>
);

导出

useQwikTable

flexRender

订阅 Bytes

订阅 Bytes