vanillajs-excelike-table
Version:
A user-friendly pure JavaScript table library with Excel-like features, preset configurations, and intuitive column helpers. Vanilla JS implementation - no frameworks required!
147 lines (136 loc) • 4.03 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VanillaJS ExceLike Table - Basic Example</title>
<link rel="stylesheet" href="../src/ExceLikeTable.css">
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
margin: 0;
padding: 20px;
background-color: #f5f5f5;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 24px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
h1 {
color: #1890ff;
margin-bottom: 20px;
text-align: center;
}
.table-container {
height: 400px;
border: 1px solid #d9d9d9;
border-radius: 4px;
}
.code-example {
background: #f6f8fa;
padding: 16px;
border-radius: 4px;
margin: 16px 0;
border: 1px solid #e1e4e8;
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
font-size: 14px;
overflow-x: auto;
}
</style>
</head>
<body>
<div class="container">
<h1>📊 VanillaJS ExceLike Table - Basic Example</h1>
<p>This example demonstrates the simplest usage of the ExceLike Table library with minimal configuration.</p>
<div class="table-container" id="table-container"></div>
<h3>Code Example:</h3>
<div class="code-example">
<!-- HTML -->
<div id="table-container"></div>
<script>
const table = new ExceLikeTable('#table-container', {
data: [
{ id: 1, name: 'John Doe', age: 30, city: 'New York' },
{ id: 2, name: 'Jane Smith', age: 25, city: 'London' },
{ id: 3, name: 'Bob Johnson', age: 35, city: 'Tokyo' }
],
columns: [
{ key: 'id', title: 'ID', dataIndex: 'id', width: 80 },
{ key: 'name', title: 'Name', dataIndex: 'name', width: 150 },
{ key: 'age', title: 'Age', dataIndex: 'age', width: 100 },
{ key: 'city', title: 'City', dataIndex: 'city', width: 120 }
]
});
</script>
</div>
</div>
<script src="../src/ExceLikeTable.js"></script>
<script>
// Basic example data
const basicData = [
{ id: 1, name: 'John Doe', age: 30, city: 'New York' },
{ id: 2, name: 'Jane Smith', age: 25, city: 'London' },
{ id: 3, name: 'Bob Johnson', age: 35, city: 'Tokyo' },
{ id: 4, name: 'Alice Brown', age: 28, city: 'Paris' },
{ id: 5, name: 'Charlie Davis', age: 32, city: 'Sydney' },
{ id: 6, name: 'Diana Wilson', age: 27, city: 'Toronto' },
{ id: 7, name: 'Eve Miller', age: 31, city: 'Berlin' },
{ id: 8, name: 'Frank Garcia', age: 29, city: 'Singapore' },
{ id: 9, name: 'Grace Martinez', age: 33, city: 'Mumbai' },
{ id: 10, name: 'Henry Anderson', age: 26, city: 'Dubai' }
];
// Basic column definitions
const basicColumns = [
{
key: 'id',
title: 'ID',
dataIndex: 'id',
width: 80,
sortable: true
},
{
key: 'name',
title: 'Name',
dataIndex: 'name',
width: 150,
sortable: true,
filterable: true
},
{
key: 'age',
title: 'Age',
dataIndex: 'age',
width: 100,
sortable: true,
filterable: true
},
{
key: 'city',
title: 'City',
dataIndex: 'city',
width: 120,
sortable: true,
filterable: true
}
];
// Initialize basic table
document.addEventListener('DOMContentLoaded', () => {
const table = new ExceLikeTable('#table-container', {
data: basicData,
columns: basicColumns,
rowKey: 'id',
pagination: {
pageSize: 5,
showSizeChanger: true
},
bordered: true,
size: 'middle'
});
});
</script>
</body>
</html>