173 lines
5.0 KiB
HTML
173 lines
5.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<title>Frappe DataTable - A simple, modern datatable library for the web</title>
|
|
<link href="assets/css/frappe-datatable.css" rel="stylesheet">
|
|
<link href="assets/css/hljs-default.css" rel="stylesheet">
|
|
<link href="assets/css/index.css" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<nav class="navbar">
|
|
<div class="container">
|
|
<h3>Frappe DataTable</h3>
|
|
<div class="navbar-links">
|
|
<a href="https://github.com/frappe/datatable">GitHub</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<div class="container">
|
|
|
|
<section class="showcase align-center">
|
|
<img class="logo" src="assets/img/data-table-logo.svg" />
|
|
<h1 class="text-center">A simple, modern and interactive<br> datatable for the web</h1>
|
|
<div class="example-1"></div>
|
|
</section>
|
|
|
|
<section class="showcase installation">
|
|
<h3>Installation</h3>
|
|
<div class="code">
|
|
<pre><code class="shell"># Install using yarn
|
|
$ yarn add frappe-datatable
|
|
|
|
# or npm
|
|
$ npm install frappe-datatable</code></pre>
|
|
</section>
|
|
|
|
<section class="showcase installation">
|
|
<h3>Usage</h3>
|
|
<div class="code">
|
|
<pre><code>import DataTable from 'frappe-datatable';
|
|
|
|
// or add
|
|
// <script src="frappe-datatable.js" ></script>
|
|
// in your html
|
|
|
|
let datatable = new DataTable({
|
|
columns: ['Name', 'Position', ...],
|
|
data: [
|
|
['Tiger Nixon', 'System Architect', ...],
|
|
['Garrett Winters', 'Accountant', ...],
|
|
...
|
|
]
|
|
});</code></pre>
|
|
</section>
|
|
<section class="showcase feature">
|
|
<h3>Cell Features</h3>
|
|
<div class="features">
|
|
<ul>
|
|
<li>Custom Formatters</li>
|
|
<li>Inline Editing</li>
|
|
<li>Mouse Selection</li>
|
|
</ul>
|
|
<ul>
|
|
<li>Copy Cells</li>
|
|
<li>Keyboard Navigation</li>
|
|
<li>Custom Cell Editor</li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="showcase feature">
|
|
<h3>Column Features</h3>
|
|
<div class="features">
|
|
<ul>
|
|
<li>Reorder Columns</li>
|
|
<li>Sort by Column</li>
|
|
<li>Remove / Hide Column</li>
|
|
</ul>
|
|
<ul>
|
|
<li>Custom Actions</li>
|
|
<li>Resize Column</li>
|
|
<li>Flexible Layout</li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="showcase feature">
|
|
<h3>Row Features</h3>
|
|
|
|
<div class="features">
|
|
<ul>
|
|
<li>Row Selection</li>
|
|
<li>Tree Structured Rows</li>
|
|
<li>Inline Filters</li>
|
|
</ul>
|
|
<ul>
|
|
<li>Large Number of Rows</li>
|
|
<li>Dynamic Row Height</li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="showcase installation">
|
|
<h3>List of configurable options</h3>
|
|
<div class="code">
|
|
<pre><code>{
|
|
columns: [],
|
|
data: [],
|
|
dropdownButton: '▼',
|
|
headerDropdown: [
|
|
{
|
|
label: 'Custom Action',
|
|
action: console.log
|
|
}
|
|
],
|
|
events: {
|
|
onRemoveColumn(column) {
|
|
|
|
},
|
|
onSwitchColumn(column1, column2) {
|
|
|
|
},
|
|
onSortColumn(column) {
|
|
|
|
}
|
|
},
|
|
sortIndicator: {
|
|
asc: '↑',
|
|
desc: '↓',
|
|
none: ''
|
|
},
|
|
freezeMessage: '',
|
|
getEditor: () => {
|
|
|
|
},
|
|
addSerialNoColumn: true,
|
|
addCheckboxColumn: false,
|
|
enableClusterize: true,
|
|
enableLogs: false,
|
|
layout: 'fixed', // fixed, fluid
|
|
noDataMessage: 'No Data',
|
|
cellHeight: null,
|
|
enableInlineFilters: false
|
|
}</code></pre>
|
|
</div>
|
|
</section>
|
|
<section class="showcase align-center">
|
|
<p>
|
|
<button class="download-button">Download</button>
|
|
</p>
|
|
<p>
|
|
<a href="https://github.com/frappe/datatable">View on GitHub</a>
|
|
</p>
|
|
<p>
|
|
<span>MIT License</span>
|
|
</p>
|
|
</section>
|
|
</div>
|
|
<footer class="showcase align-center">
|
|
<img class="footer-logo" src="assets/img/frappe-bird-grey.svg" alt="Frappe Logo">
|
|
<section>Made with ❤️ by <a>Frappe</a></section>
|
|
</footer>
|
|
<script src="assets/js/clusterize.min.js"></script>
|
|
<script src="assets/js/Sortable.min.js"></script>
|
|
<script src="assets/js/highlight.pack.js"></script>
|
|
<script>hljs.initHighlightingOnLoad();</script>
|
|
<script src="assets/js/frappe-datatable.js"></script>
|
|
<script src="assets/js/index.js"></script>
|
|
</body>
|
|
</html>
|