{"slug":"table","mode":"single","examples":[{"id":"table-ex-1","title":"基础用法","titleSrc":"","desc":"","html":"<div class=\"demo\">\n  <h1>Kole UI · Table 组件（纯 H5）</h1>\n  <p class=\"sub\">对齐 table.json 契约：表头/行高48px、分割线 #E8ECF1、悬停 #F5F7FA、选中 #F0F5FF、单元格左右16px、数字右对齐、操作列右对齐、加载/空态</p>\n  <label style=\"font-size:13px;color:var(--color-text-secondary);\">\n    <input id=\"toggleLoading\" type=\"checkbox\" />\n    模拟加载态\n  </label>\n  <div class=\"kole-table\" role=\"table\" style=\"margin-top:12px\">\n    <table>\n      <thead>\n        <tr>\n          <th class=\"col-selection\" style=\"width:48px\">\n            <input class=\"checkbox\" id=\"selectAll\" type=\"checkbox\" />\n          </th>\n          <th class=\"col-fixed\">客户名称</th>\n          <th>负责人</th>\n          <th class=\"align-right right sortable\" id=\"sortAmount\">\n            合同金额\n            <span class=\"sort-ind\" id=\"sortInd\">↕</span>\n          </th>\n          <th>状态</th>\n          <th class=\"col-action action\">操作</th>\n        </tr>\n      </thead>\n      <tbody id=\"tbody\"></tbody>\n    </table>\n    <div class=\"loading-mask\" id=\"loading\" hidden>\n      <span class=\"spinner\"></span>\n    </div>\n  </div>\n</div>","preview":{"show":[[0]],"hide":[],"mode":"single"},"previewSafe":true,"previewUnsafeReasons":[],"source":"demo-mapped","code":{"html":"<h1>Kole UI · Table 组件（纯 H5）</h1>\n<p>对齐 table.json 契约：表头/行高48px、分割线 #E8ECF1、悬停 #F5F7FA、选中 #F0F5FF、单元格左右16px、数字右对齐、操作列右对齐、加载/空态</p>\n<label style=\"font-size:13px;color:var(--color-text-secondary);\">\n  <input type=\"checkbox\" />\n  模拟加载态\n</label>\n<div class=\"kole-table\" role=\"table\" style=\"margin-top:12px\">\n  <table>\n    <thead>\n      <tr>\n        <th class=\"col-selection\" style=\"width:48px\">\n          <input class=\"checkbox\" type=\"checkbox\" />\n        </th>\n        <th>客户名称</th>\n        <th>负责人</th>\n        <th class=\"align-right sortable\">\n          合同金额\n          <span class=\"sort-ind\">↕</span>\n        </th>\n        <th>状态</th>\n        <th class=\"col-action\">操作</th>\n      </tr>\n    </thead>\n    <tbody></tbody>\n  </table>\n  <div class=\"loading-mask\" hidden>\n    <span class=\"spinner\"></span>\n  </div>\n</div>","jsx":"import { KoleTable } from 'kole-ui/react';\n\n<>\n<KoleTable selectable loading role=\"table\">客户名称 负责人 合同金额 ↕ 状态</KoleTable>\n</>","vue3":"import { KoleTable } from 'kole-ui/vue3';\n\n<template>\n<KoleTable selectable loading role=\"table\">客户名称 负责人 合同金额 ↕ 状态</KoleTable>\n</template>","vue2":"import { KoleTable } from 'kole-ui/vue2';\n\n<template>\n<KoleTable selectable loading role=\"table\">客户名称 负责人 合同金额 ↕ 状态</KoleTable>\n</template>"},"notes":[]}]}