介绍

Frappe DataTable是一个简单、现代和交互式的数据表库，用于显示表格数据。它最初是为ERPNext构建的，它可以用来呈现大量的行而不牺牲性能，并且具有基本的数据网格功能，如内联编辑和键盘导航。不像大多数数据网格那样，它不需要jQuery。

Github

https://github.com/frappe/datatable

功能特性

单元格特性：

自定义格式器
内联编辑
鼠标选择
复制单元格
键盘导航
自定义单元格编辑器

列功能：

重新排序栏
按列排序
删除/隐藏列
自定义动作
调整栏大小
布局灵活

新功能：

行选择
树状结构的行
内联过滤器
行数大
动态行高

安装使用

yarn add frappe-datatable

或者直接在浏览器引用

<script src="https://unpkg.com/frappe-datatable@latest">script>

使用

import DataTable from "frappe-datatable"

初始化一个Datatable对象

let datatable = new DataTable({
	columns: [\'Name\', \'Position\', \'Department\'],
	data: [
		[\'Tiger Nixon\', \'System Architect\', \'Tech\'],
		[\'Garrett Winters\', \'Accountant\', \'\']
	]
});

简单demo

let element = document.querySelector(\'.target\');

let datatabel = new DataTable(element, {
	columns: [\'Framework\', \'Built By\', \'GitHub Stars\', \'License\', \'Contributors\', \'Age\',\'Project Home\', \'Project Link\'],
	data: [
		[\'React\', \'Facebook\', 149017, \'MIT\', 1385, \'7 Years\', \'https://reactjs.org\', \'https://github.com/facebook/react\'],
		[\'Angular\', \'Google\', 61263, \'MIT\', 1119, \'5 Years\', \'https://angular.io\', \'https://github.com/angular/angular\'],
		[\'Vue\', \'Evan You\', 164408, \'MIT\', 293, \'4 Years\', \'https://vuejs.org\', \'https://github.com/vuejs/vue\'],
		[\'Svelte\', \'Rich Harris\', 33865, \'MIT\', 298, \'3 Years\', \'https://svelte.dev\', \'https://github.com/sveltejs/svelte/\'],
		[\'Stencil\', \'Ionic Team\', 7749, \'MIT\', 132, \'3 Years\', \'https://stenciljs.com\', \'https://github.com/ionic-team/stencil\'],
	]
});

格式化

let element = document.querySelector(\'.target\');

let datatabel = new DataTable(element, {
	columns: [
		{ name: \'Framework\' },
		{ name: \'Built By\' },
		{ name: \'GitHub Stars\', format: value => `${value} ⭐️`},
		{ name: \'License\' },
		{ name: \'Contributors\' },
		{ name: \'Age\', format: value => `${value} Years` },
		{ name: \'Project Home\', format: value => `${value}` },
		{ name: \'Project Link\', format: value => `${value}` }
	],
	data: [
		[\'React\', \'Facebook\', 149017, \'MIT\', 1385, 7, \'https://reactjs.org\', \'https://github.com/facebook/react\'],
		[\'Angular\', \'Google\', 61263, \'MIT\', 1119, 5, \'https://angular.io\', \'https://github.com/angular/angular\'],
		[\'Vue\', \'Evan You\', 164408, \'MIT\', 293, 4, \'https://vuejs.org\', \'https://github.com/vuejs/vue\'],
		[\'Svelte\', \'Rich Harris\', 33865, \'MIT\', 298, 3, \'https://svelte.dev\', \'https://github.com/sveltejs/svelte/\'],
		[\'Stencil\', \'Ionic Team\', 7749, \'MIT\', 132, 3, \'https://stenciljs.com\', \'https://github.com/ionic-team/stencil\'],
	]
});

TreeView

let element = document.querySelector(\'.demo-target-3\');
let datatable = new DataTable(element, {
	columns: [
		{ name: \'Files\', width: 300, format: formatFileName },
		{ name: \'Size\', width: 150, align: \'right\' },
		{ name: \'Last Updated\', width: 200, align: \'right\', default: "A Month Ago"},
	],
	data: [
		{
			\'Files\': \'Documents\',
			\'Size\': \'2M\',
			\'Last Updated\': \'\',
			\'indent\': 0
		},
		{
			\'Files\': \'project.pdf\',
			\'Size\': \'1M\',
			\'Last Updated\': \'Yesterday\',
			\'indent\': 1
		},
		{
			\'Files\': \'my-face.png\',
			\'Size\': \'500k\',
			\'Last Updated\': \'2018-04-09\',
			\'indent\': 1
		},
		...
	],
	treeView: true
});

主题

.dark-mode .datatable {
	--dt-border-color: #424242;
	--dt-light-bg: #2e3538;
	--dt-text-color: #dfe2e5;
	--dt-text-light: #dfe2e5;
	--dt-cell-bg: #1c1f20;
	--dt-focus-border-width: 1px;
	--dt-selection-highlight-color: var(--dt-light-bg);
	--dt-toast-message-border: 1px solid var(--dt-border-color);
	--dt-header-cell-bg: #262c2e;
}

总结

Frappe DataTable比较适合制作网页端的电子表格应用！

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/soft/13990.html