Qwik 表格

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

导出

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

useQwikTable

接受一个 options 对象,并从带有 NoSerialize 的 Qwik Store 返回一个表格。

ts
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>
);
订阅 Bytes

您的每周 JavaScript 新闻。每周一免费发送给超过 10 万名开发者。

Bytes

无垃圾邮件。随时取消订阅。