Lightweight vanilla JavaScript table library with sorting, pagination, filtering, and export capabilities
npm install vanilla-table> Lightweight vanilla JavaScript table library with sorting, pagination, filtering, and export capabilities


- Zero Dependencies - Pure vanilla JavaScript, no jQuery or other libraries required
- Sorting - Column sorting with customizable sort functions
- Pagination - Client-side pagination with configurable page sizes
- Filtering - Column-based filtering with multiple filter types
- Search - Global search across all columns
- Export - Export to CSV and JSON formats
- Zebra Striping - Alternating row colors for better readability
- Responsive - Mobile-friendly table design
- Lightweight - Minimal footprint (~15KB minified)
- Customizable - Extensive configuration options and custom render functions
``bashF`
npm install vanilla-table
Or use directly in the browser:
`html
`
`html
Name
Email
Age
`
`html
...
`
`html
...
`
| Option | Type | Default | Description |
| -------------------- | -------------- | --------------------- | ---------------------------------------------------- |
| data | Array | [] | Array of row objects |columns
| | Array | [] | Column configuration (optional, can infer from HTML) |pagination
| | Boolean | false | Enable pagination |perPage
| | Number | 25 | Rows per page |paginationInfo
| | String/Element | null | Element for pagination info text |paginationControls
| | String/Element | null | Element for pagination buttons |sorting
| | Boolean | true | Enable sorting |search
| | Boolean | false | Enable search |searchInput
| | String/Element | null | Search input element |filters
| | Object | {} | Initial filters |zebra
| | Boolean | true | Enable zebra striping |noResultsText
| | String | 'No results found.' | Text when no results |
Columns can be configured for custom rendering and behavior:
`javascript$${value.toLocaleString()}
const table = new VanillaTable("#my-table", {
data: data,
columns: [
{
data: "name",
title: "Full Name",
},
{
data: "salary",
title: "Salary",
render: (value) => ,`
},
{
data: "status",
title: "Status",
sortable: false, // Disable sorting for this column
},
{
data: "user.email", // Nested property access
title: "Email",
},
],
});
`javascript
// Load new data
table.loadData(newData);
// Get all data
const allData = table.getAllData();
// Get visible data (after filters/search)
const visibleData = table.getVisibleData();
`
`javascript
// Search
table.search("query");
// Apply filters
table.applyFilters({
department: "Engineering",
status: ["active", "pending"], // Array of allowed values
});
// Clear all filters and search
table.clearFilters();
`
`javascript
// Go to specific page
table.goToPage(3);
// Set page size
table.setPageSize(50);
`
`javascript
// Export to CSV
table.exportCSV("data.csv");
// Export to JSON
table.exportJSON("data.json");
// Get as string (without downloading)
const csvString = table.toCSV();
const jsonString = table.toJSON();
// Include filtered rows in export
table.exportCSV("all-data.csv", true);
`
`javascript`
// Destroy table instance
table.destroy();
`javascript
const table = new VanillaTable("#my-table", {
data: data,
columns: [
{
data: "avatar",
title: "Avatar",
render: (value, row) => {
return ;${value}
},
},
{
data: "status",
title: "Status",
render: (value) => {
const color = value === "active" ? "green" : "red";
return ;`
},
},
],
});
`javascript`
// Filter with custom function
table.applyFilters({
age: (value) => value >= 18 && value <= 65,
});
Users can:
- Click a column header to sort by that column
- Shift+Click to add additional sort columns (priority indicated by numbers)
See example.html` for a complete working demo with all features.
Contributions are welcome! Please feel free to submit a Pull Request.
MIT © matejkadlec
- npm Package
- GitHub Repository
- Report Issues
Contributions, issues, and feature requests are welcome once the initial implementation is complete.
For questions or suggestions, please open an issue on GitHub.