svelte-generic-crud-table
Version:
<crud-table> renders object-arrays with options-panel and inline edit per row. Dispatches events for ongoing data handling. As self-containing webcomponent or for Svelte in 60KB
51 lines (48 loc) • 2.1 kB
HTML
<html lang="en">
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1'>
<title>Generic Crud Table</title>
<link rel='icon' type='image/png' href='favicon.png'>
<link rel='stylesheet' href='global.css'>
<script defer src='build/crud-table.js'></script>
</head>
<body>
<h1><crud-table></crud-table></h1>
<p>Agnostic web-component for object-arrays with CRUD functionality.</p>
<span style="background-color: #dddddd; padding: 0.4em; display:inline-block">> npm install svelte-generic-crud-table --save-dev</span>
<p></p>
<hr>
<p>Table 1:</p>
<crud-table id="crud-table-2"></crud-table>
<br>
<hr>
<p>Table 2 configuration example:</p>
<blockquote><pre><code>
const table_config = {
name: 'Awesome',
options: ['CREATE', 'EDIT', 'DELETE', 'DETAILS'],
columns_setting: [
{name: 'id', show: false, edit: true, width: '0px'},
{name: 'job', show: true, edit: true, width: '150px', description: 'The job'},
{name: 'name', show: true, edit: true, width: '150px', tooltip: true},
{name: 'private', show: true, edit: false, width: '200px', description: 'your things', tooltip: true},
{name: 'html', show: true, edit: true, width: '500px', type: 'html', description: 'You can use HTML', tooltip: true}
],
details_text: 'detail' // replace the standard icon with an text-link
}
</code></pre></blockquote>
<crud-table id="crud-table-1"></crud-table>
<hr>
<img src="https://travis-ci.com/ivosdc/svelte-generic-crud-table.svg?branch=master" alt="travis-ci:status">
<a rel="noopener noreferrer" href='https://coveralls.io/github/ivosdc/svelte-generic-crud-table?branch=master'><img
src='https://coveralls.io/repos/github/ivosdc/svelte-generic-crud-table/badge.svg?branch=master'
alt='Coverage Status'/></a>
</body>
<script src='array-utils.js'></script>
<script src='test-data.js'></script>
<script src='crud-table-1-config-html.js'></script>
<script src='test-data2.js'></script>
<script src='crud-table-2-config-html.js'></script>
</html>