feat: Enhance getting-started guide with advanced configuration

fahdi · fahdi · commit d01d134c55aa · 2025-09-29T10:37:15.000+05:00
- Add WordPress parity feature showcase with comprehensive example
- Include advanced filtering, bulk operations, lookup fields configuration
- Add API integration setup with authentication
- Demonstrate permission system and state persistence
- Add WordPress-specific integration example
- Show enterprise-grade features in getting-started context
diff --git a/docs/guide/getting-started.md b/docs/guide/getting-started.md
@@ -1,6 +1,6 @@
 # Getting Started
 
-This guide will help you get up and running with TableCrafter.js in just a few minutes.
+This guide will help you get up and running with TableCrafter.js and its advanced WordPress plugin parity features in just a few minutes.
 
 ## Installation
 
@@ -15,13 +15,23 @@ npm install tablecrafter
 ### CDN
 
 ```html
+<!-- Include both CSS and JavaScript -->
+<link rel="stylesheet" href="https://unpkg.com/tablecrafter@latest/dist/tablecrafter.min.css">
 <script src="https://unpkg.com/tablecrafter@latest/dist/tablecrafter.min.js"></script>
 ```
 
 ### Download
 
 You can also download the latest release from [GitHub](https://github.com/TableCrafter/tablecrafter/releases) and include it directly in your project.
 
+## Quick Start Options
+
+TableCrafter offers different complexity levels depending on your needs:
+
+- **[Basic Usage](#basic-usage)** - Simple tables with sorting and filtering
+- **[Advanced Configuration](#advanced-configuration)** - WordPress parity features with API integration
+- **[WordPress Integration](#wordpress-integration)** - Drop-in replacement for WordPress plugins
+
 ## Basic Usage
 
 ### HTML Structure
@@ -98,6 +108,7 @@ Let's create a complete example with some sample data:
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>My First TableCrafter Table</title>
+  <link rel="stylesheet" href="https://unpkg.com/tablecrafter@latest/dist/tablecrafter.min.css">
 </head>
 <body>
   <div id="users-table"></div>
@@ -125,7 +136,8 @@ Let's create a complete example with some sample data:
       editable: true,
       responsive: true,
       pagination: true,
-      pageSize: 10
+      pageSize: 10,
+      exportable: true
     });
 
     table.render();
@@ -143,6 +155,185 @@ This example demonstrates several key features:
 - **Inline editing** by clicking cells
 - **Responsive design** that adapts to mobile
 - **Pagination** for large datasets
+- **CSV export** functionality
+
+## Advanced Configuration
+
+For WordPress plugin parity and enterprise features, TableCrafter offers advanced configuration options:
+
+### WordPress-Level Features
+
+```javascript
+const table = new TableCrafter('#advanced-table', {
+  // API data source
+  data: '/api/employees',
+  
+  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',
+        filter: { active: true }
+      }
+    },
+    { 
+      field: 'manager_id', 
+      label: 'Manager',
+      lookup: {
+        url: '/api/users',
+        valueField: 'id',
+        displayField: 'name',
+        filter: { role: 'manager' }
+      }
+    }
+  ],
+  
+  // Advanced filtering with auto-detection
+  filters: {
+    advanced: true,
+    autoDetect: true,
+    showClearAll: true,
+    types: {
+      'department_id': { type: 'multiselect' },
+      'hire_date': { type: 'daterange' },
+      'salary': { type: 'numberrange' }
+    }
+  },
+  
+  // Bulk operations
+  bulk: {
+    enabled: true,
+    operations: ['delete', 'export', 'promote'],
+    showProgress: true
+  },
+  
+  // Enhanced responsive design
+  responsive: {
+    enabled: true,
+    fieldVisibility: {
+      mobile: { 
+        showFields: ['name', 'department_id'],
+        hideFields: ['id', 'email', 'manager_id'] 
+      },
+      tablet: { 
+        showFields: ['name', 'email', 'department_id'] 
+      }
+    }
+  },
+  
+  // Add new entries
+  addNew: {
+    enabled: true,
+    modal: true,
+    fields: [
+      { name: 'name', label: 'Full Name', type: 'text', required: true },
+      { name: 'email', label: 'Email', type: 'email', required: true },
+      { name: 'department_id', label: 'Department', type: 'select', required: true }
+    ],
+    validation: {
+      name: { required: true, minLength: 2 },
+      email: { required: true, type: 'email' }
+    }
+  },
+  
+  // API integration
+  api: {
+    baseUrl: '/api/employees',
+    endpoints: {
+      data: '',
+      create: '',
+      update: '/{id}',
+      delete: '/{id}',
+      lookup: '/lookup'
+    },
+    headers: {
+      'Authorization': 'Bearer your-jwt-token',
+      'X-API-Key': 'your-api-key'
+    },
+    authentication: {
+      type: 'bearer',
+      token: 'your-jwt-token'
+    }
+  },
+  
+  // Permission system
+  permissions: {
+    enabled: true,
+    view: ['admin', 'manager', 'employee'],
+    edit: ['admin', 'manager'],
+    delete: ['admin'],
+    create: ['admin', 'manager'],
+    ownOnly: false
+  },
+  
+  // State persistence
+  state: {
+    persist: true,
+    storage: 'localStorage',
+    key: 'employee_table_state'
+  },
+  
+  // Event callbacks
+  onEdit: function(event) {
+    console.log('Data edited:', event);
+  },
+  onBulkAction: function(event) {
+    console.log('Bulk action performed:', event);
+  },
+  onFilter: function(event) {
+    console.log('Filters applied:', event);
+  },
+  onAdd: function(event) {
+    console.log('New entry added:', event);
+  }
+});
+
+// Set user context for permissions
+table.setCurrentUser({
+  id: 1,
+  name: 'John Admin',
+  roles: ['admin', 'manager']
+});
+
+table.render();
+```
+
+### Advanced Features Demonstrated
+
+This configuration showcases:
+
+- **🔗 Lookup Fields** - Dynamic dropdowns with API data sources
+- **🔍 Auto-Filtering** - Intelligent filter type detection
+- **⚡ Bulk Operations** - Multi-row selection with custom actions
+- **📱 Mobile Optimization** - Field visibility per device type
+- **🛡️ Permissions** - Role-based access control
+- **💾 State Persistence** - User preference memory
+- **🔄 API Integration** - Full CRUD operations with authentication
+- **➕ Add New Entries** - Modal-based data creation with validation
+
+## WordPress Integration
+
+For WordPress sites, TableCrafter can replace existing Gravity Tables installations:
+
+```javascript
+// WordPress-specific integration
+const wpTable = new WordPressTableCrafter('#wp-table', tableId, {
+  gravityFormsIntegration: true,
+  userRoleFilter: 'driver',
+  ownOnly: true,
+  wpApiBase: '/wp-json/tablecrafter/v1',
+  nonce: window.tablecrafterNonce
+});
+
+wpTable.render();
+```
 
 ## Next Steps
 
