{
 "slug": "fixedcolumntable",
 "mode": "single",
 "examples": [
  {
   "id": "fixedcolumntable-ex-1",
   "title": "基础用法",
   "titleSrc": "",
   "desc": "",
   "html": "<div class=\"kole-page\">\n  <h2 class=\"kole-h2\">FixedColumnTable 固定列表格</h2>\n  <p class=\"kole-desc\">列过多时左右列固定，横向滚动查看其余列，固定列带阴影分隔，支持固定表头。</p>\n  <div class=\"kole-demo\">\n    <div class=\"kole-demo__title\">宽表（左固定「姓名」，右固定「操作」）</div>\n    <div class=\"kole-fixtable-wrap\">\n      <table class=\"kole-fixtable\" id=\"fixtable\">\n        <thead>\n          <tr id=\"fixhead\"></tr>\n        </thead>\n        <tbody id=\"fixbody\"></tbody>\n      </table>\n    </div>\n    <div class=\"kole-hint\">← 向左滚动可查看被固定的左列 / 右列 →</div>\n  </div>\n</div>",
   "preview": {
    "show": [
     [
      0
     ]
    ],
    "hide": [],
    "mode": "single"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<h2>FixedColumnTable 固定列表格</h2>\n<p>列过多时左右列固定，横向滚动查看其余列，固定列带阴影分隔，支持固定表头。</p>\n<div>宽表（左固定「姓名」，右固定「操作」）</div>\n<div class=\"kole-fixtable-wrap\">\n  <table class=\"kole-fixtable\" id=\"fixtable\">\n    <thead>\n      <tr></tr>\n    </thead>\n    <tbody></tbody>\n  </table>\n</div>\n<div class=\"kole-hint\">← 向左滚动可查看被固定的左列 / 右列 →</div>",
    "jsx": "import { KoleFixedColumnTable } from 'kole-ui/react';\n\nconst columns = [\n  { key: 'name', title: '姓名', fixed: 'left', w: 100 },\n  { key: 'dept', title: '部门', w: 120 },\n  { key: 'role', title: '角色', w: 120 },\n  { key: 'email', title: '邮箱', w: 200 },\n  { key: 'phone', title: '电话', w: 140 },\n  { key: 'city', title: '城市', w: 120 },\n  { key: 'join', title: '入职', w: 120 },\n  { key: 'status', title: '状态', w: 100 },\n  { key: 'op', title: '操作', fixed: 'right', w: 120 },\n];\n\nconst data = [\n  { name: '王伟', dept: '华东大区', role: '销售经理', email: 'wangwei@demo.com', phone: '13800000001', city: '上海', join: '2021-03', status: '在职', op: '编辑' },\n  { name: '李娜', dept: '华南大区', role: '销售', email: 'lina@demo.com', phone: '13800000002', city: '广州', join: '2022-07', status: '在职', op: '编辑' },\n  { name: '张强', dept: '华北大区', role: '售前', email: 'zhangq@demo.com', phone: '13800000003', city: '北京', join: '2020-11', status: '休假', op: '编辑' },\n  { name: '陈静', dept: '研发中心', role: '工程师', email: 'chenj@demo.com', phone: '13800000004', city: '深圳', join: '2023-01', status: '在职', op: '编辑' },\n];\n\n// fixed: 'left' / 'right' 固定首末列，其余列横向滚动；w 为该列最小宽度\n<KoleFixedColumnTable data={data} columns={columns} />",
    "vue3": "<script setup>\nimport { KoleFixedColumnTable } from 'kole-ui/vue3';\n\nconst columns = [\n  { key: 'name', title: '姓名', fixed: 'left', w: 100 },\n  { key: 'dept', title: '部门', w: 120 },\n  { key: 'role', title: '角色', w: 120 },\n  { key: 'email', title: '邮箱', w: 200 },\n  { key: 'phone', title: '电话', w: 140 },\n  { key: 'city', title: '城市', w: 120 },\n  { key: 'join', title: '入职', w: 120 },\n  { key: 'status', title: '状态', w: 100 },\n  { key: 'op', title: '操作', fixed: 'right', w: 120 },\n];\n\nconst data = [\n  { name: '王伟', dept: '华东大区', role: '销售经理', email: 'wangwei@demo.com', phone: '13800000001', city: '上海', join: '2021-03', status: '在职', op: '编辑' },\n  { name: '李娜', dept: '华南大区', role: '销售', email: 'lina@demo.com', phone: '13800000002', city: '广州', join: '2022-07', status: '在职', op: '编辑' },\n  { name: '张强', dept: '华北大区', role: '售前', email: 'zhangq@demo.com', phone: '13800000003', city: '北京', join: '2020-11', status: '休假', op: '编辑' },\n  { name: '陈静', dept: '研发中心', role: '工程师', email: 'chenj@demo.com', phone: '13800000004', city: '深圳', join: '2023-01', status: '在职', op: '编辑' },\n];\n</script>\n\n<template>\n  <!-- fixed 为 left / right 的列固定并带阴影分隔；w 为该列最小宽度 -->\n  <KoleFixedColumnTable :data=\"data\" :columns=\"columns\" />\n</template>",
    "vue2": "<template>\n  <KoleFixedColumnTable :data=\"data\" :columns=\"columns\" />\n</template>\n\n<script>\nimport { KoleFixedColumnTable } from 'kole-ui/vue2';\n\nconst columns = [\n  { key: 'name', title: '姓名', fixed: 'left', w: 100 },\n  { key: 'dept', title: '部门', w: 120 },\n  { key: 'role', title: '角色', w: 120 },\n  { key: 'email', title: '邮箱', w: 200 },\n  { key: 'phone', title: '电话', w: 140 },\n  { key: 'city', title: '城市', w: 120 },\n  { key: 'join', title: '入职', w: 120 },\n  { key: 'status', title: '状态', w: 100 },\n  { key: 'op', title: '操作', fixed: 'right', w: 120 },\n];\n\nconst data = [\n  { name: '王伟', dept: '华东大区', role: '销售经理', email: 'wangwei@demo.com', phone: '13800000001', city: '上海', join: '2021-03', status: '在职', op: '编辑' },\n  { name: '李娜', dept: '华南大区', role: '销售', email: 'lina@demo.com', phone: '13800000002', city: '广州', join: '2022-07', status: '在职', op: '编辑' },\n  { name: '张强', dept: '华北大区', role: '售前', email: 'zhangq@demo.com', phone: '13800000003', city: '北京', join: '2020-11', status: '休假', op: '编辑' },\n  { name: '陈静', dept: '研发中心', role: '工程师', email: 'chenj@demo.com', phone: '13800000004', city: '深圳', join: '2023-01', status: '在职', op: '编辑' },\n];\n\nexport default {\n  name: 'FixedColumnTableDemo',\n  components: { KoleFixedColumnTable },\n  data() { return { columns, data }; },\n};\n</script>",
    "tsx": "import { KoleFixedColumnTable } from 'kole-ui/react';\n\nexport default function KoleFixedColumnTableDemo(): JSX.Element {\n  const columns = [\n    { key: 'name', title: '姓名', fixed: 'left', w: 100 },\n    { key: 'dept', title: '部门', w: 120 },\n    { key: 'role', title: '角色', w: 120 },\n    { key: 'email', title: '邮箱', w: 200 },\n    { key: 'phone', title: '电话', w: 140 },\n    { key: 'city', title: '城市', w: 120 },\n    { key: 'join', title: '入职', w: 120 },\n    { key: 'status', title: '状态', w: 100 },\n    { key: 'op', title: '操作', fixed: 'right', w: 120 },\n  ];\n  \n  const data = [\n    { name: '王伟', dept: '华东大区', role: '销售经理', email: 'wangwei@demo.com', phone: '13800000001', city: '上海', join: '2021-03', status: '在职', op: '编辑' },\n    { name: '李娜', dept: '华南大区', role: '销售', email: 'lina@demo.com', phone: '13800000002', city: '广州', join: '2022-07', status: '在职', op: '编辑' },\n    { name: '张强', dept: '华北大区', role: '售前', email: 'zhangq@demo.com', phone: '13800000003', city: '北京', join: '2020-11', status: '休假', op: '编辑' },\n    { name: '陈静', dept: '研发中心', role: '工程师', email: 'chenj@demo.com', phone: '13800000004', city: '深圳', join: '2023-01', status: '在职', op: '编辑' },\n  ];\n  \n  // fixed: 'left' / 'right' 固定首末列，其余列横向滚动；w 为该列最小宽度\n  return (\n    <KoleFixedColumnTable data={data} columns={columns} />\n  );\n}",
    "vue3ts": "<template>\n\n  <!-- fixed 为 left / right 的列固定并带阴影分隔；w 为该列最小宽度 -->\n  <KoleFixedColumnTable :data=\"data\" :columns=\"columns\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleFixedColumnTable } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('基础用法');\nconst columns = [\n  { key: 'name', title: '姓名', fixed: 'left', w: 100 },\n  { key: 'dept', title: '部门', w: 120 },\n  { key: 'role', title: '角色', w: 120 },\n  { key: 'email', title: '邮箱', w: 200 },\n  { key: 'phone', title: '电话', w: 140 },\n  { key: 'city', title: '城市', w: 120 },\n  { key: 'join', title: '入职', w: 120 },\n  { key: 'status', title: '状态', w: 100 },\n  { key: 'op', title: '操作', fixed: 'right', w: 120 },\n];\n\nconst data = [\n  { name: '王伟', dept: '华东大区', role: '销售经理', email: 'wangwei@demo.com', phone: '13800000001', city: '上海', join: '2021-03', status: '在职', op: '编辑' },\n  { name: '李娜', dept: '华南大区', role: '销售', email: 'lina@demo.com', phone: '13800000002', city: '广州', join: '2022-07', status: '在职', op: '编辑' },\n  { name: '张强', dept: '华北大区', role: '售前', email: 'zhangq@demo.com', phone: '13800000003', city: '北京', join: '2020-11', status: '休假', op: '编辑' },\n  { name: '陈静', dept: '研发中心', role: '工程师', email: 'chenj@demo.com', phone: '13800000004', city: '深圳', join: '2023-01', status: '在职', op: '编辑' },\n];\n</script>",
    "vue2ts": "<template>\n\n  <KoleFixedColumnTable :data=\"data\" :columns=\"columns\" />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleFixedColumnTable } from 'kole-ui/vue2';\n\nconst columns = [\n  { key: 'name', title: '姓名', fixed: 'left', w: 100 },\n  { key: 'dept', title: '部门', w: 120 },\n  { key: 'role', title: '角色', w: 120 },\n  { key: 'email', title: '邮箱', w: 200 },\n  { key: 'phone', title: '电话', w: 140 },\n  { key: 'city', title: '城市', w: 120 },\n  { key: 'join', title: '入职', w: 120 },\n  { key: 'status', title: '状态', w: 100 },\n  { key: 'op', title: '操作', fixed: 'right', w: 120 },\n];\n\nconst data = [\n  { name: '王伟', dept: '华东大区', role: '销售经理', email: 'wangwei@demo.com', phone: '13800000001', city: '上海', join: '2021-03', status: '在职', op: '编辑' },\n  { name: '李娜', dept: '华南大区', role: '销售', email: 'lina@demo.com', phone: '13800000002', city: '广州', join: '2022-07', status: '在职', op: '编辑' },\n  { name: '张强', dept: '华北大区', role: '售前', email: 'zhangq@demo.com', phone: '13800000003', city: '北京', join: '2020-11', status: '休假', op: '编辑' },\n  { name: '陈静', dept: '研发中心', role: '工程师', email: 'chenj@demo.com', phone: '13800000004', city: '深圳', join: '2023-01', status: '在职', op: '编辑' },\n];\n\nexport default {\n  name: 'FixedColumnTableDemo',\n  components: { KoleFixedColumnTable },\n  data(): Record<string, unknown> { return { columns, data }; },\n};\n</script>"
   },
   "notes": [
    "依据 frameworks/FixedColumnTable.html:28-45 的 cols（姓名 fixed:left / 操作 fixed:right / 各列 w）与 4 行 data",
    "data / columns 形参见 FixedColumnTable.jsx 与 FixedColumnTable.vue3.vue defineProps；固定类 kole-fixed-left / kole-fixed-right 见 FixedColumnTable.css"
   ]
  }
 ],
 "curated": true
}