Modern Data Table Library for Web Developers – TablixJS

TablixJS is a lightweight JavaScript library that creates powerful, responsive data tables with advanced pagination, selection, and data management features.

It focuses on delivering robust pagination implementation with both client-side and server-side support, plus row selection capabilities that work across different data sources and table configurations.

Key Features:

• Pagination system: Clean separation with dedicated PaginationManager supporting both client and server-side data handling.
• Row selection: Single and multi-row selection modes with keyboard modifiers, drag selection, and stable selection across pagination.
• Data loading: Supports direct arrays, URL-based loading, and custom async functions for complex data scenarios.
• Filtering system: Multi-column filtering with value-based and condition-based filter types.
• Sorting: Auto-detection of data types with support for custom sort functions and multi-column sorting capabilities.
• Responsive design: Mobile-friendly controls and breakpoints that adapt to different screen sizes.
• Theming: CSS custom properties with modular styling and built-in dark theme support.
• Events: Event hooks for state tracking and custom logic integration.

Basic Usage:

1. TablixJS uses ES6 modules, so you can import it directly into your project:

<script type="module">
  import Table from './src/core/Table.js';
</script>

2. Include the main stylesheet:

<link rel="stylesheet" href="./src/styles/tablix.css" />

3. Create an empty DIV container to hold your data table.

<div id="tableContainer"></div>

4. Initialize the data table and define your columns & data source:

const table = new Table('#tableContainer', {
  data: myData,
  columns: [
    { name: 'name', title: 'Employee Name', sortable: true },
    { name: 'department', title: 'Department', sortable: true },
    { name: 'salary', title: 'Salary', sortType: 'number', format: 'currency', currency: 'USD' },
    { name: 'joinDate', title: 'Join Date', sortType: 'date', format: 'date' }
  ],
  pagination: {
    enabled: true,
    pageSize: 10
  },
  sorting: {
    enabled: true
  },
  filtering: {
    enabled: true
  },
  selection: {
    enabled: true,
    mode: 'multi',
    dataIdKey: 'id'
  }
});

• Pagination API – Complete pagination guide
• Async Data Loading – Asynchronous data loading documentation
• Column Formatting – Custom column formatting guide
• Filtering – Data filtering documentation
• Sorting – Column sorting guide
• Simple Sorting – Basic sorting implementation
• Theming Guide – CSS customization and themes
• Plugin Architecture – Extending TablixJS functionality

The post Modern Data Table Library for Web Developers – TablixJS appeared first on CSS Script.