📦 ExceLikeTable - CDN Demo
🚀 Ready-to-use CDN Example
This demonstrates how to use ExceLikeTable directly from a CDN without any build process.
Perfect for: Quick prototypes, simple websites, and getting started quickly!
📋 CDN Usage
<!-- Include CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vanillajs-excelike-table/dist/excelike-table.min.css">
<!-- Include JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/vanillajs-excelike-table/dist/excelike-table.min.js"></script>
<!-- Or use the combined bundle (CSS + JS in one file) -->
<script src="https://cdn.jsdelivr.net/npm/vanillajs-excelike-table/dist/excelike-table.bundle.js"></script>
💡 Simple Implementation
// 1. Prepare your data
const data = [
{ id: 1, name: 'Alice Johnson', role: 'Developer', salary: 75000, status: 'Active' },
{ id: 2, name: 'Bob Smith', role: 'Designer', salary: 65000, status: 'Active' },
{ id: 3, name: 'Carol Williams', role: 'Manager', salary: 85000, status: 'Pending' }
];
// 2. Define columns with ColumnHelpers
const columns = [
ColumnHelpers.text('name', 'Name'),
ColumnHelpers.text('role', 'Role'),
ColumnHelpers.number('salary', 'Salary', { currency: '$' }),
ColumnHelpers.status('status', 'Status', {
'Active': '#52c41a',
'Pending': '#faad14',
'Inactive': '#ff4d4f'
})
];
// 3. Create table with preset
const table = new ExceLikeTable('#my-table', {
preset: 'standard', // Quick setup!
data: data,
columns: columns
});
🎯 Live Demo
🎮 Try these features:
- Sorting: Click column headers to sort
- Filtering: Click filter icons to search/filter data
- Settings: Click ⚙️ to customize appearance and columns
- Pagination: Navigate through pages and change page size