gettabledatasize

用于获取表格数据每列所需的宽度

Usage no npm install needed!

<script type="module">
  import gettabledatasize from 'https://cdn.skypack.dev/gettabledatasize';
</script>

README

npm version CircleCI

介绍

getTableDataSize 用于获取表格数据每列所需的宽度。

渲染表格时,在某些情况下,我们需要给每列数据设置列宽,但是数据长度的不确定性导致有时候很难设置一个满意的列宽。getTableDataSize 通过在渲染用户使用的表格前先获取每列数据所需的真实宽度,拿到宽度我们就可以用这些宽度完美的设置用户使用的表格的列宽了。

安装

使用 yarn 或者 npm

yarn add gettabledatasize

npm install gettabledatasize

使用

import { getTableDataSize } from 'gettabledatasize';

const columns = [
        { label: '姓名', field: 'name', frozen: true },
        { label: '年龄', field: 'age' },
        { label: '出生地', field: 'birthplace' },
    ];
const data = [
        { name: '纳撒尼尔·霍桑', age: 60, birthplace: '马萨诸塞州塞勒姆' },
        { name: '王小波', age: 45, birthplace: '北京' },
        { name: '加夫列尔·加西亚·马尔克斯', age: 87, birthplace: '哥伦比亚阿拉卡塔卡' },
    ];

const result = getTableDataSize(columns, data);

console.log(JSON.stringify(columns));
// [{"label":"姓名","field":"name","frozen":true,"width":183.703125,"_widthFromGTDS_":true},{"label":"年龄","field":"age","width":32,"_widthFromGTDS_":true},{"label":"出生地","field":"birthplace","width":144,"_widthFromGTDS_":true}]

console.log(JSON.stringify(result));
// {"totalWidth":359.703125,"unfrozenWidth":176,"frozenWidth":183.703125,"calculateColumnAmount":3,"notCalculateColumnAmount":0}

参数说明 getTableDataSize(columns, data, options?)

参数的格式的设计,基本依照现在流行的表格的设计,大部分配置字段都可以配置别名。

columns { Array }

必须,columnscolumn 配置对象数组,column 配置对象的可配置属性如下:

参数 说明 类型 是否必须 默认值
label 该列显示的标题 string -
field 对应列内容的字段名 string -
width 该列的宽度 number -
frozen 该列是否为固定列,可能有些框架该值为字符串,所以可以配置为字符串 boolean | string false
_widthFromGTDS_ 用以标识该列的宽度是否为计算宽度,一般无需手动配置,如果配置了 width, 则会设置为 false,否则设置为 true boolean -

data { Array }

必须,表格数据。

options { Object }

可选,其它配置。

参数 说明 类型 默认值
columnMaxWidth 最大的列宽度 number 512
columnRedundancyWidth 每列的冗余宽短,有些情况我们需要的列宽可能比计算的列宽一些,可以配置此值 number 0
font 应该于文字的样式,( 关于font string 默认获取应用于 bodyfont
widthAlias 替代 column 配置对象 width 字段的字段配置 string 'width'
labelAlias 替代 column 配置对象 label 字段的字段配置 string 'label'
fieldAlias 替代 column 配置对象 field 字段的字段配置 string 'field'
frozenAlias 替代 column 配置对象 frozen 字段的字段配置 string 'frozen'

返回值说明

每次调用会返回一个对象,该对象包含以下属性:

属性 说明 类型
totalWidth 所有列的宽度和 number
unfrozenWidth 所有未固定列的宽度和 number
frozenWidth 所有固定列的宽度和 number
calculateColumnAmount 所有设置了计算宽度的列的个数 number
notCalculateColumnAmount 所有未设置计算宽度的列的个数 number

license

MIT