📊 vanilla-table

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


✨ Features

- 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

📦 Installation

``bashF
npm install vanilla-table
`

Or use directly in the browser:

`html





`

🚀 Quick Start

$3

`html



`

$3

`html



`

$3

`html




`

📖 Configuration Options

| 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 |

🎨 Column Configuration

Columns can be configured for custom rendering and behavior:

`javascript
const table = new VanillaTable("#my-table", {
data: data,
columns: [
{
data: "name",
title: "Full Name",
},
{
data: "salary",
title: "Salary",
render: (value) => $${value.toLocaleString()},
},
{
data: "status",
title: "Status",
sortable: false, // Disable sorting for this column
},
{
data: "user.email", // Nested property access
title: "Email",
},
],
});
`

🔧 API Methods

$3

`javascript
// Load new data
table.loadData(newData);

// Get all data
const allData = table.getAllData();

// Get visible data (after filters/search)
const visibleData = table.getVisibleData();
`

$3

`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();
`

$3

`javascript
// Go to specific page
table.goToPage(3);

// Set page size
table.setPageSize(50);
`

$3

`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);
`

$3

`javascript
// Destroy table instance
table.destroy();
`

🎯 Advanced Examples

$3

`javascript
const table = new VanillaTable("#my-table", {
data: data,
columns: [
{
data: "avatar",
title: "Avatar",
render: (value, row) => {
return ;
},
},
{
data: "status",
title: "Status",
render: (value) => {
const color = value === "active" ? "green" : "red";
return ${value};
},
},
],
});
`

$3

`javascript
// Filter with custom function
table.applyFilters({
age: (value) => value >= 18 && value <= 65,
});
`

$3

Users can:

- Click a column header to sort by that column
- Shift+Click to add additional sort columns (priority indicated by numbers)

📝 Example

See example.html` for a complete working demo with all features.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

MIT © matejkadlec

🔗 Links

- npm Package
- GitHub Repository
- Report Issues

Contributions, issues, and feature requests are welcome once the initial implementation is complete.

📧 Contact

For questions or suggestions, please open an issue on GitHub.