vanilla-table 0.1.0 → 0.3.0

package/README.md

@@ -2,21 +2,21 @@
 
 > Lightweight vanilla JavaScript table library with sorting, pagination, filtering, and export capabilities
 
-## 🚧 Under Active Development
+[![npm version](https://badge.fury.io/js/vanilla-table.svg)](https://www.npmjs.com/package/vanilla-table)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
-This package is currently under active development. The full implementation is being refactored and will be available soon.
-
-## ✨ Planned Features
+## ✨ Features
 
 - **Zero Dependencies** - Pure vanilla JavaScript, no jQuery or other libraries required
-- **Sorting** - Multi-column sorting with customizable sort functions
+- **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, JSON, and Excel formats
+- **Export** - Export to CSV and JSON formats
 - **Zebra Striping** - Alternating row colors for better readability
 - **Responsive** - Mobile-friendly table design
-- **Lightweight** - Minimal footprint, inspired by DataTables but much lighter
+- **Lightweight** - Minimal footprint (~15KB minified)
+- **Customizable** - Extensive configuration options and custom render functions
 
 ## 📦 Installation
 
@@ -24,30 +24,264 @@ This package is currently under active development. The full implementation is b
 npm install vanilla-table
 ```
 
-## 🚀 Usage
+Or use directly in the browser:
+
+```html
+<!-- Include CSS -->
+<link rel="stylesheet" href="path/to/vanilla-table/src/table.css" />
+
+<!-- Include all JavaScript modules -->
+<script src="path/to/vanilla-table/src/core.js"></script>
+<script src="path/to/vanilla-table/src/render.js"></script>
+<script src="path/to/vanilla-table/src/sort.js"></script>
+<script src="path/to/vanilla-table/src/filters.js"></script>
+<script src="path/to/vanilla-table/src/pagination.js"></script>
+<script src="path/to/vanilla-table/src/exports.js"></script>
+<script src="path/to/vanilla-table/index.js"></script>
+```
+
+## 🚀 Quick Start
+
+### Basic Usage
+
+```html
+<table id="my-table">
+  <thead>
+    <tr>
+      <th data-field="name">Name</th>
+      <th data-field="email">Email</th>
+      <th data-field="age">Age</th>
+    </tr>
+  </thead>
+  <tbody></tbody>
+</table>
+
+<script>
+  const data = [
+    { name: "John Doe", email: "john@example.com", age: 30 },
+    { name: "Jane Smith", email: "jane@example.com", age: 25 },
+    { name: "Bob Johnson", email: "bob@example.com", age: 35 },
+  ];
+
+  const table = new VanillaTable("#my-table", {
+    data: data,
+    sorting: true,
+    pagination: true,
+    perPage: 10,
+  });
+</script>
+```
+
+### With Pagination Controls
+
+```html
+<div id="table-info"></div>
+<table id="my-table">
+  ...
+</table>
+<div id="pagination"></div>
+
+<script>
+  const table = new VanillaTable("#my-table", {
+    data: data,
+    pagination: true,
+    perPage: 10,
+    paginationInfo: "#table-info",
+    paginationControls: "#pagination",
+  });
+</script>
+```
+
+### With Search
+
+```html
+<input type="text" id="search" placeholder="Search..." />
+<table id="my-table">
+  ...
+</table>
+
+<script>
+  const table = new VanillaTable("#my-table", {
+    data: data,
+    search: true,
+    searchInput: "#search",
+  });
+</script>
+```
+
+## 📖 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
+
+### Data Management
 
 ```javascript
-const VanillaTable = require('vanilla-table');
+// Load new data
+table.loadData(newData);
+
+// Get all data
+const allData = table.getAllData();
+
+// Get visible data (after filters/search)
+const visibleData = table.getVisibleData();
+```
+
+### Search & Filtering
 
-// Full implementation coming soon
-const table = new VanillaTable('#my-table', {
-  pagination: true,
-  pageSize: 10,
-  sorting: true,
-  filtering: true,
-  search: true,
-  export: ['csv', 'json', 'excel']
+```javascript
+// Search
+table.search("query");
+
+// Apply filters
+table.applyFilters({
+  department: "Engineering",
+  status: ["active", "pending"], // Array of allowed values
 });
 
-table.init();
+// Clear all filters and search
+table.clearFilters();
 ```
 
-## 📝 License
+### Pagination
 
-MIT © matejkadlec
+```javascript
+// Go to specific page
+table.goToPage(3);
+
+// Set page size
+table.setPageSize(50);
+```
+
+### Export
+
+```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);
+```
+
+### Cleanup
+
+```javascript
+// Destroy table instance
+table.destroy();
+```
+
+## 🎯 Advanced Examples
+
+### Custom Render Functions
+
+```javascript
+const table = new VanillaTable("#my-table", {
+  data: data,
+  columns: [
+    {
+      data: "avatar",
+      title: "Avatar",
+      render: (value, row) => {
+        return `<img src="${value}" alt="${row.name}" style="width: 40px; border-radius: 50%;">`;
+      },
+    },
+    {
+      data: "status",
+      title: "Status",
+      render: (value) => {
+        const color = value === "active" ? "green" : "red";
+        return `<span style="color: ${color}">${value}</span>`;
+      },
+    },
+  ],
+});
+```
+
+### Custom Filtering
+
+```javascript
+// Filter with custom function
+table.applyFilters({
+  age: (value) => value >= 18 && value <= 65,
+});
+```
+
+### Multi-Column Sorting
+
+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](https://www.npmjs.com/package/vanilla-table)
+- [GitHub Repository](https://github.com/matejkadlec/vanilla-table)
+- [Report Issues](https://github.com/matejkadlec/vanilla-table/issues)
+
 Contributions, issues, and feature requests are welcome once the initial implementation is complete.
 
 ## 📧 Contact

package/index.js

@@ -1,20 +1,236 @@
 /**
- * vanilla-table
- * Lightweight vanilla JavaScript table library
- * 
- * 🚧 Full implementation coming soon
+ * VanillaTable - Lightweight vanilla JavaScript table library
+ * Features: sorting, pagination, filtering, search, and export capabilities
  */
 
+// Load all modules (in browser, these will be included via script tags)
+// In Node.js/bundler environments, you would use actual imports
+
+/**
+ * Main VanillaTable class
+ */
 class VanillaTable {
+  /**
+   * Create a new VanillaTable instance
+   * @param {string|HTMLElement} selector - CSS selector or DOM element for the table
+   * @param {Object} options - Configuration options
+   */
   constructor(selector, options = {}) {
-    this.selector = selector;
-    this.options = options;
-    console.warn('vanilla-table: Full implementation coming soon. This is a placeholder release.');
+    // Find the table element
+    this.tableElement = typeof selector === 'string' 
+      ? document.querySelector(selector)
+      : selector;
+
+    if (!this.tableElement) {
+      throw new Error('Table element not found');
+    }
+
+    // Default options
+    this.options = {
+      data: [],                    // Array of row objects
+      columns: [],                 // Column configuration
+      pagination: false,           // Enable pagination
+      perPage: 25,                 // Rows per page
+      paginationInfo: null,        // Element or selector for pagination info
+      paginationControls: null,    // Element or selector for pagination controls
+      sorting: true,               // Enable sorting
+      search: false,               // Enable search
+      searchInput: null,           // Element or selector for search input
+      filters: {},                 // Initial filters
+      zebra: true,                 // Enable zebra striping
+      noResultsText: 'No results found.',
+      ...options
+    };
+
+    // Add vanilla-table class to the table
+    this.tableElement.classList.add('vanilla-table');
+
+    // Initialize core
+    this.core = new VanillaTableCore(this.tableElement, this.options);
+    
+    // Initialize modules
+    this.renderer = new VanillaTableRenderer(this.core);
+    this.sorter = this.options.sorting ? new VanillaTableSorter(this.core, this.renderer) : null;
+    this.paginator = this.options.pagination ? new VanillaTablePaginator(this.core) : null;
+    this.filter = new VanillaTableFilter(this.core, this.renderer);
+    this.exporter = new VanillaTableExporter(this.core, this.renderer);
+
+    // Setup callbacks
+    if (this.sorter) {
+      this.core.onSort = () => {
+        if (this.paginator) this.paginator.update();
+      };
+    }
+
+    // Initialize search if enabled
+    if (this.options.search && this.options.searchInput) {
+      this.initSearch();
+    }
+
+    // Load initial data if provided
+    if (this.options.data && this.options.data.length > 0) {
+      this.loadData(this.options.data);
+    }
+  }
+
+  /**
+   * Load data into the table
+   * @param {Array} data - Array of row objects
+   */
+  loadData(data) {
+    this.renderer.renderTable(data);
+    
+    if (this.sorter) {
+      this.sorter.init();
+    }
+    
+    if (this.paginator) {
+      this.paginator.update();
+    }
+
+    return this;
+  }
+
+  /**
+   * Initialize search functionality
+   */
+  initSearch() {
+    const searchInput = typeof this.options.searchInput === 'string'
+      ? document.querySelector(this.options.searchInput)
+      : this.options.searchInput;
+
+    if (!searchInput) return;
+
+    searchInput.addEventListener('input', (e) => {
+      this.search(e.target.value);
+    });
+  }
+
+  /**
+   * Search the table
+   * @param {string} query - Search query
+   */
+  search(query) {
+    this.filter.applySearch(query);
+    if (this.paginator) {
+      this.core.state.currentPage = 1; // Reset to first page
+      this.paginator.update();
+    }
+    return this;
+  }
+
+  /**
+   * Apply filters to the table
+   * @param {Object} filters - Filter configuration
+   */
+  applyFilters(filters) {
+    this.filter.applyFilters(filters);
+    if (this.paginator) {
+      this.core.state.currentPage = 1; // Reset to first page
+      this.paginator.update();
+    }
+    return this;
   }
 
-  init() {
-    throw new Error('vanilla-table: Full implementation coming soon');
+  /**
+   * Clear all filters and search
+   */
+  clearFilters() {
+    this.filter.clearAll();
+    if (this.paginator) {
+      this.paginator.update();
+    }
+    return this;
+  }
+
+  /**
+   * Go to a specific page
+   * @param {number} page - Page number
+   */
+  goToPage(page) {
+    if (this.paginator) {
+      this.paginator.goToPage(page);
+    }
+    return this;
+  }
+
+  /**
+   * Set page size
+   * @param {number} size - Number of rows per page
+   */
+  setPageSize(size) {
+    this.core.state.perPage = size;
+    if (this.paginator) {
+      this.paginator.update();
+    }
+    return this;
+  }
+
+  /**
+   * Export table data to CSV
+   * @param {string} filename - Output filename
+   * @param {boolean} includeFiltered - Include filtered rows
+   */
+  exportCSV(filename = 'table.csv', includeFiltered = false) {
+    this.exporter.downloadCSV(filename, includeFiltered);
+    return this;
+  }
+
+  /**
+   * Export table data to JSON
+   * @param {string} filename - Output filename
+   * @param {boolean} includeFiltered - Include filtered rows
+   */
+  exportJSON(filename = 'table.json', includeFiltered = false) {
+    this.exporter.downloadJSON(filename, includeFiltered);
+    return this;
+  }
+
+  /**
+   * Get current table data as CSV string
+   * @param {boolean} includeFiltered - Include filtered rows
+   */
+  toCSV(includeFiltered = false) {
+    return this.exporter.toCSV(includeFiltered);
+  }
+
+  /**
+   * Get current table data as JSON string
+   * @param {boolean} includeFiltered - Include filtered rows
+   */
+  toJSON(includeFiltered = false) {
+    return this.exporter.toJSON(includeFiltered);
+  }
+
+  /**
+   * Get visible data
+   */
+  getVisibleData() {
+    return this.exporter.getVisibleData();
+  }
+
+  /**
+   * Get all data
+   */
+  getAllData() {
+    return this.exporter.getAllData();
+  }
+
+  /**
+   * Destroy the table instance
+   */
+  destroy() {
+    // Remove event listeners and clean up
+    this.tableElement.classList.remove('vanilla-table', 'vanilla-table-zebra', 'sorting-enabled');
+    // Note: In a full implementation, you'd want to track and remove all event listeners
   }
 }
 
-module.exports = VanillaTable;
+// Export for different module systems
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = VanillaTable;
+}
+
+if (typeof window !== 'undefined') {
+  window.VanillaTable = VanillaTable;
+}

package/package.json

@@ -1,8 +1,12 @@
 {
   "name": "vanilla-table",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "Lightweight vanilla JavaScript table library with sorting, pagination, filtering, and export capabilities",
   "main": "index.js",
+  "files": [
+    "index.js",
+    "src/"
+  ],
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },

package/src/core.js

@@ -0,0 +1,84 @@
+/**
+ * Core utilities for VanillaTable
+ */
+
+class VanillaTableCore {
+  constructor(table, options = {}) {
+    this.table = table;
+    this.tbody = table.querySelector("tbody");
+    this.thead = table.querySelector("thead");
+    this.options = options;
+    this.data = [];
+    this.rows = [];
+    this.state = {
+      currentPage: 1,
+      perPage: options.perPage || 25,
+      sortState: [],
+      filters: {},
+      searchQuery: "",
+    };
+
+    // Add zebra striping class if enabled
+    if (options.zebra !== false) {
+      this.table.classList.add("vanilla-table-zebra");
+    }
+  }
+
+  /**
+   * Recompute zebra striping for currently visible rows
+   */
+  recomputeZebra() {
+    if (this.options.zebra === false) return;
+
+    let visibleIndex = 0;
+    this.rows.forEach((row) => {
+      if (row.classList.contains("vanilla-table-no-results")) return;
+      if (row.style.display === "none") return;
+
+      row.classList.remove("odd", "even");
+      row.classList.add(visibleIndex % 2 === 0 ? "odd" : "even");
+      visibleIndex++;
+    });
+  }
+
+  /**
+   * Run a function with transitions temporarily disabled
+   */
+  withTransitionSuspended(fn) {
+    this.table.classList.add("suspend-transitions");
+    try {
+      fn();
+    } finally {
+      requestAnimationFrame(() =>
+        this.table.classList.remove("suspend-transitions")
+      );
+    }
+  }
+
+  /**
+   * Get visible rows (not hidden by filters/search)
+   */
+  getVisibleRows() {
+    return this.rows.filter(
+      (row) =>
+        !row.classList.contains("vanilla-table-no-results") &&
+        row.style.display !== "none"
+    );
+  }
+
+  /**
+   * Update the no-results row visibility
+   */
+  updateNoResults() {
+    const noResultsRow = this.tbody.querySelector(".vanilla-table-no-results");
+    if (!noResultsRow) return;
+
+    const hasVisibleRows = this.rows.some(
+      (row) =>
+        !row.classList.contains("vanilla-table-no-results") &&
+        row.style.display !== "none"
+    );
+
+    noResultsRow.style.display = hasVisibleRows ? "none" : "";
+  }
+}