### AdminLTE CDN Installation Source: https://github.com/colorlibhq/adminlte/blob/master/src/html/components/docs/introduction.mdx Include these CSS and script tags for a quick setup without a build step. Place CSS in and scripts before . ```html ``` -------------------------------- ### Install Dependencies and Run Development Server Source: https://github.com/colorlibhq/adminlte/blob/master/dist/docs/how-to-contribute.html Install Node.js dependencies and start the development server with live reloading. Ensure you have Node.js 18 or higher installed. ```bash npm install ``` ```bash npm run dev ``` -------------------------------- ### Install and Run AdminLTE Development Server Source: https://github.com/colorlibhq/adminlte/blob/master/README.md Install project dependencies and start the development server. Ensure Node.js LTS is installed. Run `npm run lint` before committing changes. ```bash npm install npm start ``` -------------------------------- ### Start AdminLTE Development Server Source: https://github.com/colorlibhq/adminlte/blob/master/README.md Starts the development server with live reload functionality. This command opens http://localhost:3000 in your browser automatically. ```bash npm start ``` -------------------------------- ### Install AdminLTE Dependencies Source: https://github.com/colorlibhq/adminlte/blob/master/README.md Install the necessary Node.js dependencies for developing AdminLTE. This command should be run in the project's root directory. ```bash npm install ``` -------------------------------- ### Install AdminLTE with npm Source: https://github.com/colorlibhq/adminlte/blob/master/dist/docs/introduction.html For production applications and framework projects, install AdminLTE using npm. Import the necessary CSS and JS files in your application's entry point. ```bash npm install admin-lte@4.0.0 ``` ```javascript // CSS import "admin-lte/dist/css/adminlte.min.css" // Plus Bootstrap and dependency CSS import "bootstrap-icons/font/bootstrap-icons.css" import "overlayscrollbars/styles/overlayscrollbars.css" // JS import "bootstrap" import "admin-lte" ``` -------------------------------- ### Run Development Server Source: https://github.com/colorlibhq/adminlte/blob/master/src/html/components/docs/how-to-contribute.mdx Start the development server with live reloading and Browsersync support. This command is used for active development within the './src' folder. ```bash npm run dev ``` -------------------------------- ### Install AdminLTE with Composer Source: https://github.com/colorlibhq/adminlte/blob/master/README.md Install AdminLTE using Composer, suitable for PHP projects. This command adds AdminLTE as a dependency to your project. ```bash composer require almasaeed2010/adminlte ``` -------------------------------- ### Treeview Initialization and Basic Usage Source: https://github.com/colorlibhq/adminlte/blob/master/dist/docs/javascript/treeview.html Demonstrates how to initialize the Treeview component and provides an example of its basic HTML structure for creating nested menus. ```APIDOC ## Treeview Initialization and Usage ### Description Initialize the Treeview component by adding `data-lte-toggle="treeview"` to the parent `
    ` or `
      `. Use `.nav-item` for items with children and nest submenus within `
        `. ### HTML Structure Example ```html

        • Dashboard

        • Reports

          • Sales

          • Traffic
        ``` ### Configuration Attributes - `data-accordion` (boolean, default: `true`): Controls whether only one submenu can be open at a time. - `data-animation-speed` (number, default: `300`): Sets the slide animation duration in milliseconds. Set to `0` to disable animation. ``` -------------------------------- ### Install AdminLTE with npm Source: https://github.com/colorlibhq/adminlte/blob/master/README.md Install AdminLTE version 4 using npm. This is a common method for projects that use a JavaScript build process. ```bash npm install admin-lte@4 ``` -------------------------------- ### Basic AdminLTE HTML Setup with Accessibility Meta Tags Source: https://github.com/colorlibhq/adminlte/blob/master/ACCESSIBILITY-COMPLIANCE.md Include essential meta tags for viewport and color scheme, and link AdminLTE's CSS and JS files. Skip links and landmarks are automatically handled. ```html
        ``` -------------------------------- ### Install AdminLTE with Composer Source: https://github.com/colorlibhq/adminlte/blob/master/dist/docs/introduction.html Use Composer to install AdminLTE 4.0.0 for your PHP projects. The package includes the necessary dist files. ```bash composer require "almasaeed2010/adminlte=4.0.0" ``` -------------------------------- ### Example Treeview Structure Source: https://github.com/colorlibhq/adminlte/blob/master/src/html/components/javascript/treeview.mdx This HTML demonstrates a nested treeview structure with a pre-expanded parent item (`menu-open`) and a second-level submenu. ```html

        • One level

        • Multilevel

          • Level 2
        ``` -------------------------------- ### Initialize GLightbox Image Viewer Source: https://github.com/colorlibhq/adminlte/blob/master/dist/docs/integrations.html Sets up GLightbox for image, video, and inline content viewing. Include the GLightbox CSS and JS files before initializing. ```html Click to enlarge ``` -------------------------------- ### Build AdminLTE from Source Source: https://github.com/colorlibhq/adminlte/blob/master/dist/docs/introduction.html To customize SCSS variables or other build configurations, clone the repository and build locally. This process requires Node.js and npm. ```bash git clone https://github.com/ColorlibHQ/AdminLTE.git cd AdminLTE npm install npm run dev # dev server with hot-reload at localhost:3000 npm run production # one-off production build (clean + lint + compile) ``` -------------------------------- ### Notification Dropdown Items Source: https://github.com/colorlibhq/adminlte/blob/master/src/html/components/docs/components/main-header.mdx Examples of individual notification items within a dropdown. Each item includes an icon, text, and a timestamp. ```html 8 friend requests 12 hours
        3 new reports 2 days
        See All Notifications ``` -------------------------------- ### Layout Plugin Initialization and Usage Source: https://github.com/colorlibhq/adminlte/blob/master/src/html/components/javascript/layout.mdx Demonstrates how to import and instantiate the Layout plugin, and how to use its `holdTransition` method to temporarily suppress CSS transitions during programmatic DOM manipulations. ```APIDOC ## Programmatic API The Layout plugin self-initializes on `DOMContentLoaded` — there's nothing to wire up manually. The only public method is exposed for advanced cases where you want to suppress transitions around your own DOM mutations: ```js import { Layout } from "admin-lte" const layout = new Layout(document.body) layout.holdTransition(200) // disable transitions for 200ms // ... do something that would otherwise animate awkwardly document.body.classList.toggle("sidebar-mini") ``` ### Methods | Method | Returns | Description | |---|---|---| | `holdTransition(time?)` | `void` | Adds `hold-transition` to ``, removes it after `time` milliseconds (default `100`). Use to suppress CSS transitions during programmatic layout changes. | ``` -------------------------------- ### Initialize GLightbox Image Viewer Source: https://github.com/colorlibhq/adminlte/blob/master/src/html/components/docs/integrations.mdx Sets up GLightbox for displaying images, videos, or inline content in a modal. Include the GLightbox CSS and JS files. ```html Click to enlarge ``` -------------------------------- ### Accessible Form with Error Handling Source: https://github.com/colorlibhq/adminlte/blob/master/ACCESSIBILITY-COMPLIANCE.md Example of an accessible form input with proper labels, ARIA attributes for error messages, and help text. ```html
        We'll never share your email with anyone else.
        ``` -------------------------------- ### Initialize Theme and Color Scheme Source: https://github.com/colorlibhq/adminlte/blob/master/dist/pages/profile.html This script initializes the theme based on local storage or OS preference, setting the 'data-bs-theme' and 'colorScheme' attributes on the document element. It handles potential localStorage unavailability. ```javascript (() => { 'use strict'; const STORAGE_KEY = 'lte-theme'; let stored = null; try { stored = localStorage.getItem(STORAGE_KEY); } catch { // localStorage may be unavailable (private mode, sandboxed iframe). } const prefersDark = globalThis.matchMedia('(prefers-color-scheme: dark)').matches; // Mirror the resolution in _scripts.astro: explicit "dark"/"light" win, // otherwise ("auto" or unset) fall back to the OS preference. let resolved = 'light'; if (stored === 'dark' || stored === 'light') { resolved = stored; } else if (prefersDark) { resolved = 'dark'; } document.documentElement.setAttribute('data-bs-theme', resolved); document.documentElement.style.colorScheme = resolved; })(); ``` -------------------------------- ### Horizontal Form Example Source: https://github.com/colorlibhq/adminlte/blob/master/dist/forms/layout.html Demonstrates a typical horizontal form layout with email, password, radio buttons, and a checkbox. Requires Bootstrap CSS for styling. ```html
        We'll never share your email with anyone else.
        Radios
        ``` -------------------------------- ### Include AdminLTE via CDN Source: https://github.com/colorlibhq/adminlte/blob/master/dist/docs/introduction.html For quick prototyping and simple sites, include these CSS and script tags in your HTML. No build step is required. ```html ``` -------------------------------- ### Semantic Navigation with ARIA Attributes Source: https://github.com/colorlibhq/adminlte/blob/master/ACCESSIBILITY-COMPLIANCE.md Example of a navigation structure using semantic HTML and ARIA attributes for improved accessibility, including expandable menus. ```html

        • Widgets

        ``` -------------------------------- ### Clone the Repository Source: https://github.com/colorlibhq/adminlte/blob/master/dist/docs/how-to-contribute.html Clone the AdminLTE repository to your local machine after forking it. This is the first step in setting up your development environment. ```bash git clone https://github.com/YOUR_USERNAME/AdminLTE.git ``` -------------------------------- ### Include AdminLTE and Dependencies (JS) Source: https://github.com/colorlibhq/adminlte/blob/master/dist/docs/getting-started.html Place these script tags just before the closing `` tag to load AdminLTE, Bootstrap 5.3, Popper, and OverlayScrollbars from jsDelivr. ```html ``` -------------------------------- ### Card Widget Example Source: https://github.com/colorlibhq/adminlte/blob/master/dist/docs/getting-started.html Demonstrates the usage of the collapsible and removable card widget. This snippet requires no additional JavaScript and is controlled via data attributes. ```html
        Collapsible card
        Click the minus icon to collapse; the X to remove.
        ``` -------------------------------- ### Direct Chat Plugin Usage Source: https://github.com/colorlibhq/adminlte/blob/master/dist/docs/javascript/direct-chat.html This section explains how to activate the Direct Chat Plugin using data attributes and provides an example of its implementation within a card component. ```APIDOC ## Direct Chat Plugin Usage This plugin is activated via data attributes. **Data API** Add `data-lte-toggle="chat-pane"` to a button inside a `.direct-chat` container to toggle the contacts list. ```html

        Direct Chat

        ``` ``` -------------------------------- ### Programmatic Plugin Control (ESM) Source: https://github.com/colorlibhq/adminlte/blob/master/src/html/components/javascript/plugins-overview.mdx Instantiate plugins directly in your JavaScript code using ESM imports for fine-grained control. This example shows expanding the sidebar and maximizing a card. ```javascript // ESM (bundler import) import { PushMenu, CardWidget, Treeview } from "admin-lte" // Sidebar new PushMenu(document.body, {}).expand() // Card maximize const card = document.querySelector("#chart-card") new CardWidget(card, {}).maximize() ``` -------------------------------- ### Card Widget Initialization and Usage Source: https://github.com/colorlibhq/adminlte/blob/master/dist/docs/javascript/card-widget.html Demonstrates how to initialize the Card Widget programmatically and use its core methods for controlling card states like maximize, collapse, expand, and remove. ```APIDOC ## Card Widget Programmatic API ### Description Instantiate the Card Widget to control card states programmatically. ### Initialization ```javascript import { CardWidget } from "admin-lte" const card = document.querySelector("#chart-card") const widget = new CardWidget(card, { animationSpeed: 250 }) ``` ### Methods #### `maximize()` - **Returns**: `void` - **Description**: Expands the card to fullscreen, adding the `maximized-card` class. Fires the `maximized.lte.card-widget` event. #### `collapse()` - **Returns**: `void` - **Description**: Hides the card body and footer by sliding them up, adding the `collapsed-card` class. Fires the `collapsed.lte.card-widget` event. #### `expand()` - **Returns**: `void` - **Description**: Shows the card body and footer by sliding them down, removing the `collapsed-card` class. Fires the `expanded.lte.card-widget` event. #### `toggle()` - **Returns**: `void` - **Description**: Toggles between collapsed and expanded states based on the presence of the `collapsed-card` class. #### `toggleMaximize()` - **Returns**: `void` - **Description**: Toggles between maximized and minimized states based on the presence of the `maximized-card` class. #### `remove()` - **Returns**: `void` - **Description**: Animates the card out and removes it from the DOM. Fires the `remove.lte.card-widget` event. ``` -------------------------------- ### Inline Form Example Source: https://github.com/colorlibhq/adminlte/blob/master/dist/forms/layout.html Shows an inline form layout where all elements appear on the same line. Suitable for simple forms on smaller screens or when space is limited. Requires Bootstrap CSS. ```html
        ``` -------------------------------- ### Include AdminLTE and Dependencies (CSS) Source: https://github.com/colorlibhq/adminlte/blob/master/dist/docs/getting-started.html Copy these tags into the `` of your HTML file to include AdminLTE, Bootstrap 5.3, Popper, OverlayScrollbars, and Bootstrap Icons via CDN. ```html ``` -------------------------------- ### Icon Class Examples: AdminLTE 3 vs AdminLTE 4 Source: https://github.com/colorlibhq/adminlte/blob/master/src/html/components/docs/migration.mdx Illustrates the difference in HTML class names for icons between AdminLTE 3 (FontAwesome) and AdminLTE 4 (Bootstrap Icons). ```html ``` -------------------------------- ### Build AdminLTE Assets Source: https://github.com/colorlibhq/adminlte/blob/master/README.md Builds all assets for development. For a production-ready build, use 'npm run production'. ```bash npm run build ``` -------------------------------- ### CDN Subresource Integrity (SRI) Example Source: https://github.com/colorlibhq/adminlte/blob/master/dist/docs/deployment.html Include a Subresource Integrity (SRI) hash when loading AdminLTE from a public CDN. This prevents the CDN from serving malicious JavaScript if it's compromised. ```html ``` -------------------------------- ### Initialize Theme Management in AdminLTE Source: https://github.com/colorlibhq/adminlte/blob/master/dist/examples/lockscreen.html Manages theme persistence using localStorage and applies the preferred theme (dark, light, or auto) to the document. It also handles theme switching based on OS preference and user selections. ```javascript (() => { 'use strict'; const STORAGE_KEY = 'lte-theme'; const getStoredTheme = () => localStorage.getItem(STORAGE_KEY); const setStoredTheme = (theme) => localStorage.setItem(STORAGE_KEY, theme); const prefersDark = () => globalThis.matchMedia('(prefers-color-scheme: dark)').matches; const getPreferredTheme = () => { const stored = getStoredTheme(); if (stored) return stored; return prefersDark() ? 'dark' : 'light'; }; const setTheme = (theme) => { const resolved = theme === 'auto' ? (prefersDark() ? 'dark' : 'light') : theme; document.documentElement.setAttribute('data-bs-theme', resolved); }; setTheme(getPreferredTheme()); const showActiveTheme = (theme) => { document.querySelectorAll('\\[data-bs-theme-value\\]').forEach((el) => { el.classList.remove('active'); el.setAttribute('aria-pressed', 'false'); const check = el.querySelector('.bi-check-lg'); if (check) check.classList.add('d-none'); }); const active = document.querySelector(`\\[data-bs-theme-value="${theme}"\\]`); if (active) { active.classList.add('active'); active.setAttribute('aria-pressed', 'true'); const check = active.querySelector('.bi-check-lg'); if (check) check.classList.remove('d-none'); } document.querySelectorAll('\\[data-lte-theme-icon\\]').forEach((icon) => { icon.classList.toggle('d-none', icon.dataset.lteThemeIcon !== theme); }); }; globalThis.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => { const stored = getStoredTheme(); if (!stored || stored === 'auto') setTheme(getPreferredTheme()); }); document.addEventListener('DOMContentLoaded', () => { showActiveTheme(getPreferredTheme()); document.querySelectorAll('\\[data-bs-theme-value\\]').forEach((toggle) => { toggle.addEventListener('click', () => { const theme = toggle.getAttribute('data-bs-theme-value'); setStoredTheme(theme); setTheme(theme); showActiveTheme(theme); }); }); }); })(); ``` -------------------------------- ### Responsive Data Table with Horizontal Scroll Source: https://github.com/colorlibhq/adminlte/blob/master/dist/docs/recipes.html Wrap your HTML table within a `.table-responsive` div to ensure it gets a horizontal scrollbar on narrow viewports, preventing overflow issues. This is useful for tables with many columns. ```html

        Recent orders

        # Customer Total Status Actions
        ``` -------------------------------- ### Theme Management with Local Storage Source: https://github.com/colorlibhq/adminlte/blob/master/dist/index.html Manages theme persistence using Local Storage. It provides functions to get the stored theme and set a new theme, and checks for user's preferred color scheme. ```javascript (() => { 'use strict'; const STORAGE_KEY = 'lte-theme'; const getStoredTheme = () => localStorage.getItem(STORAGE_KEY); const setStoredTheme = (theme) => localStorage.setItem(STORAGE_KEY, theme); const prefersDark = () => globalThis.matchMedia('(prefers-color-scheme: ' ``` -------------------------------- ### PushMenu Initialization Source: https://github.com/colorlibhq/adminlte/blob/master/dist/docs/javascript/pushmenu.html Import the PushMenu class and instantiate it on a target element, typically a sidebar toggle button, with optional configuration settings. ```APIDOC ## PushMenu Initialization ### Description Import the PushMenu class and instantiate it on any element (typically the sidebar toggle button or `document.body`): ### Code ```javascript import { PushMenu } from "admin-lte" const sidebar = new PushMenu(document.querySelector('[data-lte-toggle="sidebar"]'), { sidebarBreakpoint: 992, enablePersistence: false }) ``` ``` -------------------------------- ### Initialize Theme Based on OS Preference or Local Storage Source: https://github.com/colorlibhq/adminlte/blob/master/dist/generate/theme.html This script initializes the theme by checking local storage for a stored theme preference. If no preference is found, it defaults to the operating system's color scheme preference (dark or light). The theme is then applied to the document's root element and CSS variables. ```javascript (() => { 'use strict'; const STORAGE_KEY = 'lte-theme'; let stored = null; try { stored = localStorage.getItem(STORAGE_KEY); } catch { // localStorage may be unavailable (private mode, sandboxed iframe). } const prefersDark = globalThis.matchMedia('(prefers-color-scheme: dark)').matches; // Mirror the resolution in _scripts.astro: explicit "dark"/"light" win, // otherwise ("auto" or unset) fall back to the OS preference. let resolved = 'light'; if (stored === 'dark' || stored === 'light') { resolved = stored; } else if (prefersDark) { resolved = 'dark'; } document.documentElement.setAttribute('data-bs-theme', resolved); document.documentElement.style.colorScheme = resolved); })(); ``` -------------------------------- ### Treeview Initialization and Usage Source: https://github.com/colorlibhq/adminlte/blob/master/src/html/components/javascript/treeview.mdx Demonstrates how to initialize the Treeview component using data attributes and structure HTML for collapsible navigation. ```APIDOC ## Data API Initialization Add `data-lte-toggle="treeview"` to the parent `
          ` or `
            ` element to enable the Treeview functionality. ### HTML Structure Use `.nav-item` for list items that contain submenus. Nest submenus within a `
              `. ```html

              • Dashboard

              • Reports

                • Sales

                • Traffic
              ``` To have a submenu pre-expanded by default, add the `menu-open` class to its parent `.nav-item`. ``` -------------------------------- ### Advanced Theme Management Logic Source: https://github.com/colorlibhq/adminlte/blob/master/dist/examples/register-v2.html Provides a comprehensive theme management system. Includes functions to get and set themes from local storage, detect OS preference, and apply the chosen theme. Also handles updating UI elements to reflect the active theme. ```javascript (() => { 'use strict'; const STORAGE_KEY = 'lte-theme'; const getStoredTheme = () => localStorage.getItem(STORAGE_KEY); const setStoredTheme = (theme) => localStorage.setItem(STORAGE_KEY, theme); const prefersDark = () => globalThis.matchMedia('(prefers-color-scheme: dark)').matches; const getPreferredTheme = () => { const stored = getStoredTheme(); if (stored) return stored; return prefersDark() ? 'dark' : 'light'; }; const setTheme = (theme) => { const resolved = theme === 'auto' ? (prefersDark() ? 'dark' : 'light') : theme; document.documentElement.setAttribute('data-bs-theme', resolved); }; setTheme(getPreferredTheme()); const showActiveTheme = (theme) => { // Highlight the active dropdown option document.querySelectorAll('["data-bs-theme-value"]').forEach((el) => { el.classList.remove('active'); el.setAttribute('aria-pressed', 'false'); const check = el.querySelector('.bi-check-lg'); if (check) check.classList.add('d-none'); }); const active = document.querySelector(`["data-bs-theme-value"="${theme}"]`); if (active) { active.classList.add('active'); active.setAttribute('aria-pressed', 'true'); const check = active.querySelector('.bi-check-lg'); if (check) check.classList.remove('d-none'); } // Sync the topbar trigger icon document.querySelectorAll('["data-lte-theme-icon"]').forEach((icon) => { icon.classList.toggle('d-none', icon.dataset.lteThemeIcon !== theme); }); }; globalThis.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => { const stored = getStoredTheme(); if (!stored || stored === 'auto') setTheme(getPreferredTheme()); }); document.addEventListener('DOMContentLoaded', () => { showActiveTheme(getPreferredTheme()); document.querySelectorAll('["data-bs-theme-value"]').forEach((toggle) => { toggle.addEventListener('click', () => { const theme = toggle.getAttribute('data-bs-theme-value'); setStoredTheme(theme); setTheme(theme); showActiveTheme(theme); }); }); }); })(); ``` -------------------------------- ### Initialize Monthly Sales Chart Source: https://github.com/colorlibhq/adminlte/blob/master/dist/index2.html Renders a monthly sales chart using ApexCharts. Ensure the 'sales-chart' element exists and 'sales_chart_options' are defined. ```javascript const sales_chart = new ApexCharts( document.querySelector('#sales-chart'), sales_chart_options, ); sales_chart.render(); ``` -------------------------------- ### Theme Management with Local Storage and OS Preference Source: https://github.com/colorlibhq/adminlte/blob/master/dist/generate/theme.html This script provides functions to manage theme settings using local storage. It includes logic to get and set the stored theme, check the OS preference for dark mode, and determine the preferred theme based on stored values or OS settings. It also applies the resolved theme to the document. ```javascript (() => { 'use strict'; const STORAGE_KEY = 'lte-theme'; const getStoredTheme = () => localStorage.getItem(STORAGE_KEY); const setStoredTheme = (theme) => localStorage.setItem(STORAGE_KEY, theme); const prefersDark = () => globalThis.matchMedia('(prefers-color-scheme: dark)').matches; const getPreferredTheme = () => { const stored = getStoredTheme(); if (stored) return stored; return prefersDark() ? 'dark' : 'light'; }; const setTheme = (theme) => { const resolved = theme === 'auto' ? (prefersDark() ? 'dark' : 'light') : theme; document.documentElement.setAttribute('data-bs-theme', resolved); }; setTheme(getPreferredTheme()); const showActiveTheme = (theme) => { // Highlight the active dropdown option document.querySelectorAll('[data-bs-theme-value]').forEach((el) => { el.classList.remove('active'); el.setAttribute('aria-pressed', 'false'); const check = el.querySelector('.bi-check-lg'); if (check) check.classList.add('d-none'); }); const ``` -------------------------------- ### Programmatic Plugin Instantiation (UMD) Source: https://github.com/colorlibhq/adminlte/blob/master/dist/docs/javascript/plugins-overview.html Use the global `adminlte` object to instantiate plugins when using the UMD bundle without a build step. This provides imperative control over plugin features. ```javascript ``` -------------------------------- ### Initialize User Table with Data and Configuration Source: https://github.com/colorlibhq/adminlte/blob/master/dist/tables/data.html Initializes a Tabulator table with user data, layout options, pagination, and column definitions. Includes input fields for filtering and buttons for export/print actions. ```javascript const statusBadge = (cell) => { const value = cell.getValue(); const map = { Active: 'success', Invited: 'info', Suspended: 'secondary' }; const color = map[value] || 'secondary'; return `${value}`; }; document.addEventListener('DOMContentLoaded', () => { const data = [ { id: 1, name: 'Olivia Bennett', email: 'olivia@example.com', role: 'Admin', status: 'Active', joined: '2024-03-12' }, { id: 2, name: 'Liam Carter', email: 'liam@example.com', role: 'Editor', status: 'Active', joined: '2024-04-08' }, { id: 3, name: 'Emma Dawson', email: 'emma@example.com', role: 'Viewer', status: 'Invited', joined: '2024-06-21' }, { id: 4, name: 'Noah Evans', email: 'noah@example.com', role: 'Editor', status: 'Suspended', joined: '2024-07-15' }, { id: 5, name: 'Ava Foster', email: 'ava@example.com', role: 'Admin', status: 'Active', joined: '2024-08-30' }, { id: 6, name: 'Ethan Grant', email: 'ethan@example.com', role: 'Viewer', status: 'Active', joined: '2024-09-14' }, { id: 7, name: 'Sophia Hayes', email: 'sophia@example.com', role: 'Editor', status: 'Active', joined: '2024-10-02' }, { id: 8, name: 'Mason Ingram', email: 'mason@example.com', role: 'Viewer', status: 'Invited', joined: '2024-11-19' }, { id: 9, name: 'Isabella Jones', email: 'isabella@example.com', role: 'Admin', status: 'Active', joined: '2025-01-05' }, { id: 10, name: 'Lucas Klein', email: 'lucas@example.com', role: 'Viewer', status: 'Suspended', joined: '2025-02-18' }, { id: 11, name: 'Mia Lopez', email: 'mia@example.com', role: 'Editor', status: 'Active', joined: '2025-03-22' }, { id: 12, name: 'Logan Moore', email: 'logan@example.com', role: 'Viewer', status: 'Active', joined: '2025-04-09' }, { id: 13, name: 'Charlotte Nelson', email: 'charlotte@example.com', role: 'Admin', status: 'Active', joined: '2025-04-27' }, { id: 14, name: 'Henry Owens', email: 'henry@example.com', role: 'Editor', status: 'Invited', joined: '2025-05-11' }, { id: 15, name: 'Amelia Price', email: 'amelia@example.com', role: 'Viewer', status: 'Active', joined: '2025-05-17' }, ]; const table = new Tabulator('#users-table', { data: data, layout: 'fitColumns', pagination: true, paginationSize: 10, paginationSizeSelector: [10, 25, 50, 100], movableColumns: true, columns: [ { title: '#', field: 'id', width: 60, headerSort: true }, { title: 'Name', field: 'name', headerFilter: 'input' }, { title: 'Email', field: 'email', headerFilter: 'input' }, { title: 'Role', field: 'role', headerFilter: 'list', headerFilterParams: { values: ['', 'Admin', 'Editor', 'Viewer'] }, width: 120, }, { title: 'Status', field: 'status', formatter: statusBadge, headerFilter: 'list', headerFilterParams: { values: ['', 'Active', 'Invited', 'Suspended'] }, width: 130, hozAlign: 'center', }, { title: 'Joined', field: 'joined', sorter: 'date', width: 130 }, ], }); }); ``` -------------------------------- ### Initialize Accessibility Module with Specific Features Source: https://github.com/colorlibhq/adminlte/blob/master/src/html/components/javascript/accessibility.mdx Demonstrates how to initialize the accessibility module and disable specific features by setting their options to `false`. ```javascript initAccessibility({ announcements: false, skipLinks: true, focusManagement: true, keyboardNavigation: true, reducedMotion: true }) ```