Gettabledatasize NPM

介绍

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 }

必须，columns 为 column 配置对象数组，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	默认获取应用于 `body` 的 `font` 值
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