TableCrafter.jsCraft Beautiful Data Tables

import TableCrafter from 'tablecrafter';

const data = [
  { id: 1, name: 'John Doe', email: 'john@example.com', role: 'Developer' },
  { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'Designer' },
  { id: 3, name: 'Bob Johnson', email: 'bob@example.com', role: 'Manager' }
];

const table = new TableCrafter('#my-table', {
  data: data,
  columns: [
    { field: 'id', label: 'ID' },
    { field: 'name', label: 'Name', editable: true },
    { field: 'email', label: 'Email', editable: true },
    { 
      field: 'department_id', 
      label: 'Department',
      editable: true,
      lookup: {
        url: '/api/departments',
        valueField: 'id',
        displayField: 'name'
      }
    },
    { field: 'role', label: 'Role', editable: true }
  ],
  
  // Advanced filtering with auto-detection
  filters: {
    advanced: true,
    autoDetect: true,
    showClearAll: true
  },
  
  // Bulk operations
  bulk: {
    enabled: true,
    operations: ['delete', 'export', 'edit']
  },
  
  // Enhanced responsive design
  responsive: {
    fieldVisibility: {
      mobile: { showFields: ['name', 'role'] },
      tablet: { showFields: ['name', 'email', 'role'] }
    }
  },
  
  // API integration
  api: {
    baseUrl: '/api/employees',
    authentication: { type: 'bearer', token: 'jwt-token' }
  },
  
  // Permission system
  permissions: {
    enabled: true,
    edit: ['admin', 'manager'],
    delete: ['admin']
  },
  
  editable: true,
  pagination: true,
  state: { persist: true }
});

// Set user context for permissions
table.setCurrentUser({
  id: 1,
  roles: ['admin']
});

table.render();