import{c as t,d as n,b as e,e as d,g as r,h as a,j as o,k as s,l,a as i,D as c,o as m,f as $,E as f,p as h,i as u,F as p,m as g,A as b,y,G as k,V as v,S as w,ab as _,ac as S}from"./chunk.82446879.js";import{z as x,g as A}from"./chunk.f5a3f321.js";import"./chunk.e8a2e241.js";import{a as E}from"./chunk.4b4ee497.js";import"./chunk.b01e898f.js";import{a as j}from"./chunk.fb378401.js";import"./chunk.94a6e723.js";function M(t){let n;return{c(){n=d("div"),this.h()},l(t){n=r(t,"DIV",{id:!0}),a(n).forEach(o),this.h()},h(){s(n,"id","smx-md-doc")},m(e,d){l(e,n,d),n.innerHTML=t[0]},p(t,[e]){1&e&&(n.innerHTML=t[0])},i:i,o:i,d(t){t&&o(n)}}}function B(t,n,e){let{html:d}=n;return t.$set=(t=>{"html"in t&&e(0,d=t.html)}),[d]}class C extends t{constructor(t){super(),n(this,t,B,M,e,{html:0})}}var D={html:'

参数

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
OptionTypeDescription
columnsObject[]列配置
rowsObject[]行数据
sortByString需要排序列key
sortOrderNumber排序 1 = 升序, -1 降序
clickColfunctionevent listener/callback
clickRowfunctionevent listener/callback
clickCellfunctionevent listener/callback
classNameTableString/Arrayclass name(s) for table element
classNameTheadString/Arrayclass name(s) for thead element
classNameTbodyString/Arrayclass name(s) for tbody element
classNameSelectString/Arrayclass name(s) for select elements
classNameRowString/Arrayclass name(s) for row elements
classNameCellString/Arrayclass name(s) for cell elements
fullwidthBoolean是否全宽度
borderedBoolean为所有单元格添加边框
hoverableBoolean在每行上添加悬停效果
stripedBoolean在表中添加条纹
narrowBoolean使单元格变窄
customBoolean自定义列
tWidthString宽度
tHeightString高度
fixedHeaderBoolean固定表头,固定表头时需要设置父级div高度或者自定义tHeight
activedRowKeyArray选中key
keyString唯一id,设置激活行时必须设置
\n

Events

\n

点击事件

\n\n

字段允许双向绑定

\n

列配置

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
OptionTypeDescription
keyString数据唯一key
titleString显示标题
[class]String单元格指定样式类名
[sortable]Boolean是否开启排序
[filterOptions]Array/Functionoptional array of objects with name and value. Function is provided array of rows
[filterValue]String要过滤的值,通常与值相同
[headerClass]String标题头指定样式类名
[renderValue]Function自定义呈现渲染html
componentBoolean展示自定义组件,目前只允许针对某一列进行设置
\n

样式配置

\n

在引入bluma的scss样式下,我们可以使用变量来控制表格风格样式。

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameTypeDefault valueComputed value
$table-colorcolor$text-stronghsl(0, 0%, 21%)
$table-background-colorcolor$scheme-mainhsl(0, 0%, 100%)
$table-cell-bordersize1px solid $border
$table-cell-border-widthsize0 0 1px
$table-cell-paddingsize0.5em 0.75em
$table-cell-heading-colorcolor$text-stronghsl(0, 0%, 21%)
$table-head-cell-border-widthsize0 0 2px
$table-head-cell-colorcolor$text-stronghsl(0, 0%, 21%)
$table-foot-cell-border-widthsize2px 0 0
$table-foot-cell-colorcolor$text-stronghsl(0, 0%, 21%)
$table-head-background-colorstringtransparent
$table-body-background-colorstringtransparent
$table-foot-background-colorstringtransparent
$table-row-hover-background-colorcolor$scheme-main-bishsl(0, 0%, 98%)
$table-row-active-background-colorcolor$primaryhsl(171, 100%, 41%)
$table-row-active-colorcolor$primary-invert#fff
$table-striped-row-even-background-colorcolor$scheme-main-bishsl(0, 0%, 98%)
$table-striped-row-even-hover-background-colorcolor$scheme-main-terhsl(0, 0%, 96%)
$table-colorsfunction$colorsmergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert, $primary-light, $primary-dark), "link": ($link, $link-invert, $link-light, $link-dark), "info": ($info, $info-invert, $info-light, $info-dark), "success": ($success, $success-invert, $success-light, $success-dark), "warning": ($warning, $warning-invert, $warning-light, $warning-dark), "danger": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)
\n

案例

\n
<script>\n  import Table from "../../Table";\n  const rows = [\n    /** 数据体 */\n  ];\n  const columns = [\n    /** 列设置 */\n  ];\n</script>\n\n<Table columns="{columns}" rows="{rows}"></Table>
\n

Sample Data and config

\n
// define some sample data...\nconst rows = [\n  { id: 1, first_name: "Marilyn", last_name: "Monroe", gender: "female" },\n  { id: 2, first_name: "Abraham", last_name: "Lincoln", gender: "male" },\n  { id: 3, first_name: "Mother", last_name: "Teresa", gender: "female" },\n  { id: 4, first_name: "John F.", last_name: "Kennedy", gender: "male" },\n  { id: 5, first_name: "Martin Luther", last_name: "King", gender: "male" },\n  { id: 6, first_name: "Nelson", last_name: "Mandela", gender: "male" },\n  { id: 7, first_name: "Winston", last_name: "Churchill", gender: "male" },\n  { id: 8, first_name: "George", last_name: "Soros", gender: "male" },\n  { id: 9, first_name: "Bill", last_name: "Gates", gender: "male" },\n  { id: 10, first_name: "Muhammad", last_name: "Ali", gender: "male" },\n  { id: 11, first_name: "Mahatma", last_name: "Gandhi", gender: "male" },\n  { id: 12, first_name: "Margaret", last_name: "Thatcher", gender: "female" },\n  { id: 13, first_name: "Christopher", last_name: "Columbus", gender: "male" },\n  { id: 14, first_name: "Charles", last_name: "Darwin", gender: "male" },\n  { id: 15, first_name: "Elvis", last_name: "Presley", gender: "male" },\n  { id: 16, first_name: "Albert", last_name: "Einstein", gender: "male" },\n  { id: 17, first_name: "Paul", last_name: "McCartney", gender: "male" },\n  { id: 18, first_name: "Queen", last_name: "Victoria", gender: "female" },\n  { id: 19, first_name: "Pope", last_name: "Francis", gender: "male" }\n  // etc...\n];\n\n// define column configs\nconst columns = [\n  {\n    key: "id",\n    title: "ID",\n    sortable: true,\n    filterOptions: rows => {\n      // generate groupings of 0-10, 10-20 etc...\n      let nums = {};\n      rows.forEach(row => {\n        let num = Math.floor(row.id / 10);\n        if (nums[num] === undefined)\n          nums[num] = { name: `${num * 10} to ${(num + 1) * 10}`, value: num };\n      });\n      // fix order\n      nums = Object.entries(nums)\n        .sort()\n        .reduce((o, [k, v]) => ((o[k] = v), o), {});\n      return Object.values(nums);\n    },\n    filterValue: v => Math.floor(v.id / 10),\n    headerClass: "text-left"\n  },\n  {\n    key: "first_name",\n    title: "FIRST_NAME",\n    sortable: true,\n    filterOptions: rows => {\n      // use first letter of first_name to generate filter\n      let letrs = {};\n      rows.forEach(row => {\n        let letr = row.first_name.charAt(0);\n        if (letrs[letr] === undefined)\n          letrs[letr] = {\n            name: `${letr.toUpperCase()}`,\n            value: letr.toLowerCase()\n          };\n      });\n      // fix order\n      letrs = Object.entries(letrs)\n        .sort()\n        .reduce((o, [k, v]) => ((o[k] = v), o), {});\n      return Object.values(letrs);\n    },\n    filterValue: v => v.first_name.charAt(0).toLowerCase()\n  },\n  {\n    key: "last_name",\n    title: "LAST_NAME",\n    sortable: true,\n    filterOptions: rows => {\n      // use first letter of last_name to generate filter\n      let letrs = {};\n      rows.forEach(row => {\n        let letr = row.last_name.charAt(0);\n        if (letrs[letr] === undefined)\n          letrs[letr] = {\n            name: `${letr.toUpperCase()}`,\n            value: letr.toLowerCase()\n          };\n      });\n      // fix order\n      letrs = Object.entries(letrs)\n        .sort()\n        .reduce((o, [k, v]) => ((o[k] = v), o), {});\n      return Object.values(letrs);\n    },\n    filterValue: v => v.last_name.charAt(0).toLowerCase()\n  },\n  {\n    key: "gender",\n    title: "GENDER",\n    renderValue: v => v.gender.charAt(0).toUpperCase() + v.gender.substring(1), // capitalize\n    sortable: true,\n    filterOptions: ["male", "female"] // provide array\n  }\n];
',metadata:{},filename:"stable.md",path:"/Users/keiferju/workplace/Publish/svelma-pro/docs/src/mddocs/stable.md"};function O(t){let n,e;const m=new x({props:{columns:t[2],rows:t[3]}});return{c(){n=d("div"),c(m.$$.fragment),this.h()},l(t){n=r(t,"DIV",{slot:!0,style:!0});var e=a(n);f(m.$$.fragment,e),e.forEach(o),this.h()},h(){s(n,"slot","preview"),v(n,"height","200px")},m(t,d){l(t,n,d),p(m,n,null),e=!0},p:i,i(t){e||(b(m.$$.fragment,t),e=!0)},o(t){y(m.$$.fragment,t),e=!1},d(t){t&&o(n),k(m)}}}function T(t){let n,e;const m=new x({props:{columns:t[2],rows:t[3],checkbox:!0,bordered:!0,narrow:!0}});return{c(){n=d("div"),c(m.$$.fragment),this.h()},l(t){n=r(t,"DIV",{slot:!0,style:!0});var e=a(n);f(m.$$.fragment,e),e.forEach(o),this.h()},h(){s(n,"slot","preview"),v(n,"height","200px")},m(t,d){l(t,n,d),p(m,n,null),e=!0},p:i,i(t){e||(b(m.$$.fragment,t),e=!0)},o(t){y(m.$$.fragment,t),e=!1},d(t){t&&o(n),k(m)}}}function I(t){let n;return{c(){n=$("Submit")},l(t){n=u(t,"Submit")},m(t,e){l(t,n,e)},d(t){t&&o(n)}}}function N(t){let n;return{c(){n=$("Reset")},l(t){n=u(t,"Reset")},m(t,e){l(t,n,e)},d(t){t&&o(n)}}}function R(t){let n,e,i;const $=new A({props:{type:"is-primary",size:"is-small",$$slots:{default:[I]},$$scope:{ctx:t}}});$.$on("click",function(...n){return t[7](t[10],...n)});const u=new A({props:{type:"is-primary",size:"is-small",$$slots:{default:[N]},$$scope:{ctx:t}}});return{c(){n=d("div"),c($.$$.fragment),e=m(),c(u.$$.fragment),this.h()},l(t){n=r(t,"DIV",{class:!0,slot:!0});var d=a(n);f($.$$.fragment,d),e=h(d),f(u.$$.fragment,d),d.forEach(o),this.h()},h(){s(n,"class","buttons"),s(n,"slot","component")},m(t,d){l(t,n,d),p($,n,null),g(n,e),p(u,n,null),i=!0},p(n,e){t=n;const d={};2048&e&&(d.$$scope={dirty:e,ctx:t}),$.$set(d);const r={};2048&e&&(r.$$scope={dirty:e,ctx:t}),u.$set(r)},i(t){i||(b($.$$.fragment,t),b(u.$$.fragment,t),i=!0)},o(t){y($.$$.fragment,t),y(u.$$.fragment,t),i=!1},d(t){t&&o(n),k($),k(u)}}}function z(t){let n,e,i,m;function $(n){t[8].call(null,n)}function h(n){t[9].call(null,n)}let u={columns:t[4],rows:t[5],key:"id",activedRowKey:[2],$$slots:{component:[R,({row:t})=>({10:t}),({row:t})=>t?1024:0]},$$scope:{ctx:t}};void 0!==t[0]&&(u.sortBy=t[0]),void 0!==t[1]&&(u.sortOrder=t[1]);const g=new x({props:u});return w.push(()=>_(g,"sortBy",$)),w.push(()=>_(g,"sortOrder",h)),{c(){n=d("div"),c(g.$$.fragment),this.h()},l(t){n=r(t,"DIV",{slot:!0,style:!0});var e=a(n);f(g.$$.fragment,e),e.forEach(o),this.h()},h(){s(n,"slot","preview"),v(n,"height","200px")},m(t,e){l(t,n,e),p(g,n,null),m=!0},p(t,n){const d={};2048&n&&(d.$$scope={dirty:n,ctx:t}),!e&&1&n&&(e=!0,d.sortBy=t[0],S(()=>e=!1)),!i&&2&n&&(i=!0,d.sortOrder=t[1],S(()=>i=!1)),g.$set(d)},i(t){m||(b(g.$$.fragment,t),m=!0)},o(t){y(g.$$.fragment,t),m=!1},d(t){t&&o(n),k(g)}}}function L(t){let n,e,i,v,w,_,S,x,A,M,B,I,N,R,L,V,F,P;const G=new E({props:{title:"stable",subtitle:"表格"}}),H=new j({props:{horizontal:!0,code:"