FrappeDataTable–简单、交互式的web数据表

介绍

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


简单、交互式的web数据表——FrappeDataTable

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\'],
	]
});
简单、交互式的web数据表——FrappeDataTable

格式化

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\'],
	]
});
简单、交互式的web数据表——FrappeDataTable

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
});
简单、交互式的web数据表——FrappeDataTable

主题

.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;
}
简单、交互式的web数据表——FrappeDataTable

总结

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

内容出处:,

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

发表评论

登录后才能评论