{
 "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": "curated",
   "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 { useState } from 'react';\nimport { KoleTable } from 'kole-ui/react';\n\nconst columns = [\n  { key: 'name', title: '客户名称', width: 180, fixed: true },\n  { key: 'owner', title: '负责人' },\n  { key: 'amount', title: '合同金额', align: 'right', sortable: true },\n  { key: 'status', title: '状态' },\n  { key: 'action', title: '操作', type: 'action' }\n];\n\nconst data = [\n  { id: 1, name: '北京云图科技', owner: '张伟', amount: 128000, status: '已签约' },\n  { id: 2, name: '上海恒创', owner: '李娜', amount: 86000, status: '跟进中' },\n  { id: 3, name: '广州锐捷', owner: '王芳', amount: 254000, status: '已签约' },\n  { id: 4, name: '深圳智联', owner: '刘强', amount: 43000, status: '待回款' }\n];\n\nexport default function ContractTable() {\n  const [selectedKeys, setSelectedKeys] = useState([1, 3]);\n  const onSortChange = ({ key, order }) => console.log(key, order);\n  const renderAction = (row) => <button onClick={() => console.log(row.id)}>编辑</button>;\n  return (\n    <KoleTable\n      columns={columns}\n      data={data}\n      rowKey=\"id\"\n      selectable\n      selectedKeys={selectedKeys}\n      onSelectionChange={setSelectedKeys}\n      onSortChange={onSortChange}\n      renderAction={renderAction}\n    />\n  );\n}",
    "vue3": "<template>\n  <KoleTable\n    :columns=\"columns\"\n    :data=\"data\"\n    row-key=\"id\"\n    selectable\n    v-model:selected-keys=\"selectedKeys\"\n    @sort-change=\"onSortChange\"\n  >\n    <template #action=\"{ row }\">\n      <button @click=\"edit(row)\">编辑</button>\n    </template>\n  </KoleTable>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleTable } from 'kole-ui/vue3';\n\nconst columns = [\n  { key: 'name', title: '客户名称', width: 180, fixed: true },\n  { key: 'owner', title: '负责人' },\n  { key: 'amount', title: '合同金额', align: 'right', sortable: true },\n  { key: 'status', title: '状态' },\n  { key: 'action', title: '操作', type: 'action' }\n];\n\nconst data = [\n  { id: 1, name: '北京云图科技', owner: '张伟', amount: 128000, status: '已签约' },\n  { id: 2, name: '上海恒创', owner: '李娜', amount: 86000, status: '跟进中' },\n  { id: 3, name: '广州锐捷', owner: '王芳', amount: 254000, status: '已签约' },\n  { id: 4, name: '深圳智联', owner: '刘强', amount: 43000, status: '待回款' }\n];\n\nconst selectedKeys = ref([1, 3]);\nconst onSortChange = ({ key, order }) => console.log(key, order);\nconst edit = (row) => console.log('编辑', row.id);\n</script>",
    "vue2": "<template>\n  <KoleTable\n    :columns=\"columns\"\n    :data=\"data\"\n    row-key=\"id\"\n    selectable\n    :selected-keys=\"selectedKeys\"\n    @selection-change=\"selectedKeys = $event\"\n    @sort-change=\"onSortChange\"\n  >\n    <template slot=\"action\" slot-scope=\"{ row }\">\n      <button @click=\"edit(row)\">编辑</button>\n    </template>\n  </KoleTable>\n</template>\n\n<script>\nimport { KoleTable } from 'kole-ui/vue2';\n\nexport default {\n  name: 'ContractTable',\n  components: { KoleTable },\n  data() {\n    return {\n      columns: [\n        { key: 'name', title: '客户名称', width: 180, fixed: true },\n        { key: 'owner', title: '负责人' },\n        { key: 'amount', title: '合同金额', align: 'right', sortable: true },\n        { key: 'status', title: '状态' },\n        { key: 'action', title: '操作', type: 'action' }\n      ],\n\n      data: [\n        { id: 1, name: '北京云图科技', owner: '张伟', amount: 128000, status: '已签约' },\n        { id: 2, name: '上海恒创', owner: '李娜', amount: 86000, status: '跟进中' },\n        { id: 3, name: '广州锐捷', owner: '王芳', amount: 254000, status: '已签约' },\n        { id: 4, name: '深圳智联', owner: '刘强', amount: 43000, status: '待回款' }\n      ],\n\n      selectedKeys: [1, 3]\n    };\n  },\n  methods: {\n    onSortChange({ key, order }) {\n      console.log(key, order);\n    },\n    edit(row) {\n      console.log('编辑', row.id);\n    }\n  }\n};\n</script>",
    "tsx": "import { useState } from 'react';\nimport { KoleTable } from 'kole-ui/react';\n\ntype ColumnAlign = 'left' | 'right';\ninterface TableColumn {\n  key: string;\n  title: string;\n  width?: number;\n  fixed?: boolean;\n  align?: ColumnAlign;\n  sortable?: boolean;\n  type?: 'action';\n}\n\ninterface ContractRow {\n  id: number;\n  name: string;\n  owner: string;\n  amount: number;\n  status: string;\n}\n\ntype SortOrder = 'asc' | 'desc';\ninterface SortChange {\n  key: string;\n  order: SortOrder;\n}\n\nconst columns: ReadonlyArray<TableColumn> = [\n  { key: 'name', title: '客户名称', width: 180, fixed: true },\n  { key: 'owner', title: '负责人' },\n  { key: 'amount', title: '合同金额', align: 'right', sortable: true },\n  { key: 'status', title: '状态' },\n  { key: 'action', title: '操作', type: 'action' },\n];\n\nconst data: ReadonlyArray<ContractRow> = [\n  { id: 1, name: '北京云图科技', owner: '张伟', amount: 128000, status: '已签约' },\n  { id: 2, name: '上海恒创', owner: '李娜', amount: 86000, status: '跟进中' },\n  { id: 3, name: '广州锐捷', owner: '王芳', amount: 254000, status: '已签约' },\n  { id: 4, name: '深圳智联', owner: '刘强', amount: 43000, status: '待回款' },\n];\n\nexport default function ContractTable(): JSX.Element {\n  const [selectedKeys, setSelectedKeys] = useState<ReadonlyArray<number>>([1, 3]);\n\n  function onSortChange({ key, order }: SortChange): void {\n    console.log(key, order);\n  }\n  function renderAction(row: ContractRow): JSX.Element {\n    return <button onClick={() => console.log(row.id)}>编辑</button>;\n  }\n\n  return (\n    <KoleTable\n      columns={columns}\n      data={data}\n      rowKey=\"id\"\n      selectable\n      selectedKeys={selectedKeys}\n      onSelectionChange={setSelectedKeys}\n      onSortChange={onSortChange}\n      renderAction={renderAction}\n    />\n  );\n}",
    "vue3ts": "<template>\n  <KoleTable\n    :columns=\"columns\"\n    :data=\"data\"\n    row-key=\"id\"\n    selectable\n    v-model:selected-keys=\"selectedKeys\"\n    @sort-change=\"onSortChange\"\n  >\n    <template #action=\"{ row }\">\n      <button @click=\"edit(row)\">编辑</button>\n    </template>\n  </KoleTable>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { KoleTable } from 'kole-ui/vue3';\n\ntype ColumnAlign = 'left' | 'right';\ninterface TableColumn {\n  key: string;\n  title: string;\n  width?: number;\n  fixed?: boolean;\n  align?: ColumnAlign;\n  sortable?: boolean;\n  type?: 'action';\n}\n\ninterface ContractRow {\n  id: number;\n  name: string;\n  owner: string;\n  amount: number;\n  status: string;\n}\n\ntype SortOrder = 'asc' | 'desc';\ninterface SortChange {\n  key: string;\n  order: SortOrder;\n}\n\nconst columns: ReadonlyArray<TableColumn> = [\n  { key: 'name', title: '客户名称', width: 180, fixed: true },\n  { key: 'owner', title: '负责人' },\n  { key: 'amount', title: '合同金额', align: 'right', sortable: true },\n  { key: 'status', title: '状态' },\n  { key: 'action', title: '操作', type: 'action' },\n];\n\nconst data: ReadonlyArray<ContractRow> = [\n  { id: 1, name: '北京云图科技', owner: '张伟', amount: 128000, status: '已签约' },\n  { id: 2, name: '上海恒创', owner: '李娜', amount: 86000, status: '跟进中' },\n  { id: 3, name: '广州锐捷', owner: '王芳', amount: 254000, status: '已签约' },\n  { id: 4, name: '深圳智联', owner: '刘强', amount: 43000, status: '待回款' },\n];\n\nconst selectedKeys = ref<ReadonlyArray<number>>([1, 3]);\nfunction onSortChange({ key, order }: SortChange): void {\n  console.log(key, order);\n}\nfunction edit(row: ContractRow): void {\n  console.log('编辑', row.id);\n}\n</script>",
    "vue2ts": "<template>\n  <KoleTable\n    :columns=\"columns\"\n    :data=\"data\"\n    row-key=\"id\"\n    selectable\n    :selected-keys=\"selectedKeys\"\n    @selection-change=\"selectedKeys = $event\"\n    @sort-change=\"onSortChange\"\n  >\n    <template slot=\"action\" slot-scope=\"{ row }\">\n      <button @click=\"edit(row)\">编辑</button>\n    </template>\n  </KoleTable>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleTable } from 'kole-ui/vue2';\n\ntype ColumnAlign = 'left' | 'right';\ninterface TableColumn {\n  key: string;\n  title: string;\n  width?: number;\n  fixed?: boolean;\n  align?: ColumnAlign;\n  sortable?: boolean;\n  type?: 'action';\n}\n\ninterface ContractRow {\n  id: number;\n  name: string;\n  owner: string;\n  amount: number;\n  status: string;\n}\n\ntype SortOrder = 'asc' | 'desc';\ninterface SortChange {\n  key: string;\n  order: SortOrder;\n}\n\nexport default Vue.extend({\n  name: 'ContractTable',\n  components: { KoleTable },\n  data(): {\n    columns: ReadonlyArray<TableColumn>;\n    data: ReadonlyArray<ContractRow>;\n    selectedKeys: ReadonlyArray<number>;\n  } {\n    return {\n      columns: [\n        { key: 'name', title: '客户名称', width: 180, fixed: true },\n        { key: 'owner', title: '负责人' },\n        { key: 'amount', title: '合同金额', align: 'right', sortable: true },\n        { key: 'status', title: '状态' },\n        { key: 'action', title: '操作', type: 'action' },\n      ],\n      data: [\n        { id: 1, name: '北京云图科技', owner: '张伟', amount: 128000, status: '已签约' },\n        { id: 2, name: '上海恒创', owner: '李娜', amount: 86000, status: '跟进中' },\n        { id: 3, name: '广州锐捷', owner: '王芳', amount: 254000, status: '已签约' },\n        { id: 4, name: '深圳智联', owner: '刘强', amount: 43000, status: '待回款' },\n      ],\n      selectedKeys: [1, 3],\n    };\n  },\n  methods: {\n    onSortChange({ key, order }: SortChange): void {\n      console.log(key, order);\n    },\n    edit(row: ContractRow): void {\n      console.log('编辑', row.id);\n    },\n  },\n});\n</script>"
   },
   "notes": "依据 frameworks/Table.html:59-65 表头列定义（客户名称 col-fixed / 合同金额 sortable+align-right / 操作 col-action）、:74-79 四行数据、:111-125 行选择、:131-137 排序"
  }
 ],
 "curated": true
}