71 lines
2.4 KiB
HTML
71 lines
2.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>DataTable Demo</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
|
<style>
|
|
body, html { height: 100%; margin: 0; padding: 0; overflow: hidden; }
|
|
.demo-container { height: 100vh; padding: 20px; display: flex; flex-direction: column; }
|
|
.table-wrapper { flex-grow: 1; min-height: 0; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); }
|
|
</style>
|
|
</head>
|
|
|
|
<body class="bg-light">
|
|
<div class="demo-container">
|
|
<div class="table-wrapper">
|
|
<DataTable id="myTable"></DataTable>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module">
|
|
import { RefreshState } from '@web/state'
|
|
import '@web/base'
|
|
import '../src/index.js'
|
|
|
|
const table = document.getElementById('myTable')
|
|
|
|
const fields = [
|
|
{ id: 'id', name: 'ID', width: 60, type: 'text', pinned: 'left' },
|
|
{ id: 'name', name: 'User Name', width: 150, type: 'text', pinned: 'left' },
|
|
{ id: 'role', name: 'Role', width: 120, type: 'select', options: ['Admin', 'Editor', 'Viewer'] },
|
|
{ id: 'active', name: 'Active', width: 80, type: 'switch' },
|
|
{ id: 'bio', name: 'Bio', width: 250, type: 'textarea' },
|
|
{ id: 'gender', name: 'Gender', width: 120, type: 'radio', options: ['Male', 'Female', 'Other'] },
|
|
{ id: 'tags', name: 'Tags', width: 150, type: 'TagsInput' },
|
|
{ id: 'score', name: 'Score', width: 100, type: 'number' },
|
|
{ id: 'created', name: 'Created At', width: 150, type: 'date' },
|
|
{ id: 'actions', name: 'Actions', width: 100, type: 'text', pinned: 'right' }
|
|
]
|
|
|
|
const generateData = (count) => Array.from({ length: count }, (_, i) => ({
|
|
id: i + 1,
|
|
name: 'User ' + (i + 1),
|
|
role: ['Admin', 'Editor', 'Viewer'][i % 3],
|
|
active: i % 2 === 0,
|
|
bio: 'Bio ' + (i + 1),
|
|
gender: ['Male', 'Female', 'Other'][i % 3],
|
|
tags: ['State.js', 'Vite'].slice(0, (i % 2) + 1),
|
|
score: 80,
|
|
created: '2026-05-17',
|
|
actions: '...'
|
|
}))
|
|
|
|
const data = generateData(500)
|
|
|
|
const init = () => {
|
|
if (table.state) {
|
|
Object.assign(table.state, { fields, list: data });
|
|
window.testStatus = 'passed';
|
|
} else {
|
|
setTimeout(init, 50);
|
|
}
|
|
};
|
|
init();
|
|
</script>
|
|
</body>
|
|
</html>
|