表格

表格是一种用于展示数据的结构化布局，支持表头排序和移动端响应式。

基础表格

  • Preview
  • Code
人物 民族 人生格言
孔子 华夏 有朋自远方来，不亦乐乎
孟子 华夏 穷则独善其身，达则兼济天下 
<table hx-ext="bny-table">
    <colgroup>
        <col width="150">
        <col width="150">
        <col>
    </colgroup>
    <thead>
        <tr>
            <th>人物</th>
            <th>民族</th>
            <th>人生格言</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>孔子</td>
            <td>华夏</td>
            <td>有朋自远方来，不亦乐乎</td>
        </tr>
        <tr>
            <td>孟子</td>
            <td>华夏</td>
            <td>穷则独善其身，达则兼济天下</td>
        </tr>
    </tbody>
</table>

颜色

  • Preview
  • Code
人物 民族 人生格言
孔子 华夏 有朋自远方来，不亦乐乎
孟子 华夏 穷则独善其身，达则兼济天下 
<table hx-ext="bny-table" color="green">
    ...
</table>

<!-- 支持 green / yellow / red / blue -->

表头排序

  • Preview
  • Code
姓名 年龄 积分
张三 28 920
李四 22 1050
王五 31 780
赵六 25 1340 
<table hx-ext="bny-table">
    <thead>
        <tr>
            <th data-sort>姓名</th>
            <th data-sort="number">年龄</th>
            <th data-sort="number">积分</th>
        </tr>
    </thead>
    <tbody>
        <tr><td>张三</td><td>28</td><td>920</td></tr>
        <tr><td>李四</td><td>22</td><td>1050</td></tr>
        <tr><td>王五</td><td>31</td><td>780</td></tr>
        <tr><td>赵六</td><td>25</td><td>1340</td></tr>
    </tbody>
</table>

自定义排序值

  • Preview
  • Code

当单元格显示内容与排序值不一致时，使用 data-sort-val 指定参与排序的值

排名 选手
🥇 第一名 选手A
🥉 第三名 选手C
🥈 第二名 选手B 
<table hx-ext="bny-table">
    <thead>
        <tr>
            <th data-sort="number">排名</th>
            <th>选手</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-sort-val="1">🥇 第一名</td>
            <td>选手A</td>
        </tr>
        <tr>
            <td data-sort-val="2">🥈 第二名</td>
            <td>选手B</td>
        </tr>
        <tr>
            <td data-sort-val="3">🥉 第三名</td>
            <td>选手C</td>
        </tr>
    </tbody>
</table>

Htmx用法

  • Preview
  • Code
  • Json
<button class="bny-btn" hx-ext="bny-table"
    hx-get="/test/data/table01.json" hx-target="#table-demo"
    hx-swap="innerHTML" hx-trigger="click">加载表格</button>

<button class="bny-btn" hx-ext="bny-table"
    hx-get="/test/data/table02.json" hx-target="#table-demo"
    hx-swap="innerHTML" hx-trigger="click">加载蓝色表格</button>

<div id="table-demo"></div>
                
// table01.json
{
    "cols": ["姓名", "年龄", "积分"],
    "rows": [
        ["张三", "28", "920"],
        ["李四", "22", "1050"],
        ["王五", "31", "780"],
        ["赵六", "25", "1340"]
    ]
}

// table02.json — 带颜色
{
    "color": "blue",
    "cols": ["排名", "选手", "得分"],
    "rows": [
        ["1", "选手A", "98.5"],
        ["2", "选手B", "95.0"],
        ...
    ]
}

Htmx-动态追加行

  • Preview
  • Code
姓名 年龄
张三 28
李四 22 
<button class="bny-btn" hx-get="/test/data/table-row.html"
    hx-target="#table-append tbody" hx-swap="beforeend"
    hx-trigger="click">追加一行</button>

<table hx-ext="bny-table" id="table-append">
    <thead>
        <tr>
            <th data-sort>姓名</th>
            <th data-sort="number">年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr><td>张三</td><td>28</td></tr>
        <tr><td>李四</td><td>22</td></tr>
    </tbody>
</table>

富内容单元格 + 持久化排序

  • Preview
  • Code
  • Json
单元格支持 { "__html": "..." } 渲染原始 HTML（用于链接/按钮等富内容）。点击列头排序后，HTMX 重新加载会从 sessionStorage 恢复排序状态。 
<button hx-ext="bny-table" hx-get="/test/data/table03.json"
    hx-target="#table-raw-demo" hx-swap="innerHTML">加载表格</button>

// 单元格使用对象 { __html: '<a ...>编辑</a>' } 时会渲染原始 HTML
            
// table03.json
{
    "key": "user-list",
    "cols": [
        {"name": "姓名", "sortable": true, "sort": "string"},
        {"name": "操作", "sortable": false}
    ],
    "rows": [
        ["张三", {"__html": "<a class='bny-btn' model='border'>编辑</a>"}]
    ]
}

空状态

  • Preview
  • Code
  • Json
<button hx-ext="bny-table" hx-get="/test/data/table04.json"
    hx-target="#table-empty-demo">加载空数据</button>
            
// table04.json
{
    "key": "empty-table",
    "cols": ["姓名", "年龄", "积分"],
    "rows": [],
    "empty": "暂无符合条件的记录"
}

API

标签属性

属性 默认值 必须 描述 版本
hx-ext bny-table 是 拓展属性名
color default 否 表头颜色：green/yellow/red/blue
data-sort string 否 作用于 th，启用排序。值 number 表示按数字排序，默认为字符串
sortable — 否 作用于 th，等同于 data-sort（字符串排序）
data-sort-val — 否 作用于 td，指定该单元格参与排序的值（显示与排序值不同时使用）

JSON属性

属性 默认值 必须 描述 版本
color — 否 表头颜色：green/yellow/red/blue
cols [] 是 列名字符串数组
rows [] 是 二维数组，每行为一条数据

排序行为

  1. 点击带 data-sort 或 sortable 属性的表头即可排序
  2. 首次点击 → 升序（▲ 高亮），再次点击 → 降序（▼ 高亮）
  3. data-sort="number" 按数值排序，否则按字符串排序
  4. 单元格可通过 data-sort-val 指定参与排序的实际值
  5. JSON 响应自动渲染为完整表格，同时支持直接追加 HTML 行