Data Grid

<gstock-data-grid></gstock-data-grid>

<script type="module">
  customElements.whenDefined('gstock-data-grid').then(() => {
    
    const grid = document.querySelector('gstock-data-grid');

    grid.columns = [
      { key: 'name', title: 'Nombre' },
      { key: 'email', title: 'Correo electrónico' },
      { key: 'role', title: 'Rol' },
      { key: 'status', title: 'Estado', align: 'center' },
    ];

    grid.data = [
      {
        id: 1,
        name: 'Juan Pérez',
        email: 'juan.perez@example.com',
        role: 'Administrador',
        status: 'Activo',
      },
      {
        id: 2,
        name: 'María García',
        email: 'maria.garcia@example.com',
        role: 'Usuario',
        status: 'Activo',
      },
      {
        id: 3,
        name: 'Carlos López',
        email: 'carlos.lopez@example.com',
        role: 'Editor',
        status: 'Inactivo',
      },
      {
        id: 4,
        name: 'Ana Rodríguez',
        email: 'ana.rodriguez@example.com',
        role: 'Usuario',
        status: 'Activo',
      },
      {
        id: 5,
        name: 'Luis Martín',
        email: 'luis.martin@example.com',
        role: 'Editor',
        status: 'Activo',
      },
    ];
  });
</script>

<gstock-data-grid size="small"></gstock-data-grid>

<br>

<gstock-data-grid size="medium"></gstock-data-grid>

<br>

<gstock-data-grid size="large"></gstock-data-grid>

<script type="module">
  customElements.whenDefined('gstock-data-grid').then(() => {
    
    const gridSmall = document.querySelector('gstock-data-grid[size="small"]');
    const gridMedium = document.querySelector('gstock-data-grid[size="medium"]');
    const gridLarge = document.querySelector('gstock-data-grid[size="large"]');

    const columns = [
      { key: 'name', title: 'Nombre' },
      { key: 'role', title: 'Rol' },
      { key: 'status', title: 'Estado' },
    ];

    const data = [
      { id: 1, name: 'Juan Pérez', role: 'Admin', status: 'Activo' },
      { id: 2, name: 'María García', role: 'Usuario', status: 'Activo' },
      { id: 3, name: 'Carlos López', role: 'Editor', status: 'Inactivo' },
    ];

    gridSmall.columns = columns;
    gridSmall.data = data;
    gridMedium.columns = columns;
    gridMedium.data = data;
    gridLarge.columns = columns;
    gridLarge.data = data;
  });
</script>

<gstock-data-grid></gstock-data-grid>

<script type="module">
  customElements.whenDefined('gstock-data-grid').then(() => {
    
    const grid = document.querySelector('gstock-data-grid');

    grid.columns = [
      {
        key: 'name',
        title: 'Full Name',
        sortable: true,
        width: '250px',
        align: 'left',
      },
      {
        key: 'email',
        title: 'Email Address',
        sortable: true,
        width: '250px',
        type: 'text',
      },
      {
        key: 'age',
        title: 'Age',
        sortable: true,
        width: '80px',
        align: 'center',
        type: 'number',
      },
      {
        key: 'active',
        title: 'Active',
        sortable: true,
        width: '150px',
        align: 'center',
        type: 'boolean',
        formatter: (value, row) => {
          return value ? '✅' : '❌';
        },
      },
    ];

    grid.data = [
      {
        id: 1,
        name: 'John Doe Smith',
        email: 'john.doe@company.com',
        age: 32,
        active: true,
      },
      {
        id: 2,
        name: 'Jane Marie Johnson',
        email: 'jane.johnson@company.com',
        age: 28,
        active: true,
      },
      {
        id: 3,
        name: 'Mike Brown Wilson',
        email: 'mike.brown@company.com',
        age: 35,
        active: false,
      },
      {
        id: 4,
        name: 'Sarah Davis Miller',
        email: 'sarah.davis@company.com',
        age: 30,
        active: true,
      },
      {
        id: 5,
        name: 'David Lee Taylor',
        email: 'david.lee@company.com',
        age: 26,
        active: true,
      },
    ];
  });
</script>

<gstock-data-grid striped></gstock-data-grid>

<script type="module">
  customElements.whenDefined('gstock-data-grid').then(() => {
    
    const grid = document.querySelector('gstock-data-grid');

    grid.columns = [
      { key: 'name', title: 'Nombre' },
      { key: 'email', title: 'Correo electrónico' },
      { key: 'role', title: 'Rol' },
      { key: 'status', title: 'Estado', align: 'center' },
    ];

    grid.data = [
      {
        id: 1,
        name: 'Juan Pérez',
        email: 'juan.perez@example.com',
        role: 'Administrador',
        status: 'Activo',
      },
      {
        id: 2,
        name: 'María García',
        email: 'maria.garcia@example.com',
        role: 'Usuario',
        status: 'Activo',
      },
      {
        id: 3,
        name: 'Carlos López',
        email: 'carlos.lopez@example.com',
        role: 'Editor',
        status: 'Inactivo',
      },
      {
        id: 4,
        name: 'Ana Rodríguez',
        email: 'ana.rodriguez@example.com',
        role: 'Usuario',
        status: 'Activo',
      },
      {
        id: 5,
        name: 'Luis Martín',
        email: 'luis.martin@example.com',
        role: 'Editor',
        status: 'Activo',
      },
    ];
  });
</script>

<gstock-data-grid bordered></gstock-data-grid>

<script type="module">
  customElements.whenDefined('gstock-data-grid').then(() => {
    
    const grid = document.querySelector('gstock-data-grid');

    grid.columns = [
      { key: 'name', title: 'Nombre del producto', sortable: true },
      { key: 'category', title: 'Categoría', sortable: true },
      { key: 'price', title: 'Precio', sortable: true, align: 'right' },
      { key: 'inStock', title: 'En stock', align: 'center' },
      { key: 'rating', title: 'Valoración', sortable: true, align: 'center' },
    ];

    grid.data = [
      {
        id: 1,
        name: 'Auriculares inalámbricos',
        category: 'Electrónica',
        price: 99.99,
        inStock: true,
        rating: 4.5,
      },
      {
        id: 2,
        name: 'Cafetera',
        category: 'Electrodomésticos',
        price: 129.99,
        inStock: false,
        rating: 4.2,
      },
      {
        id: 3,
        name: 'Esterilla de yoga',
        category: 'Fitness',
        price: 29.99,
        inStock: true,
        rating: 4.7,
      },
      {
        id: 4,
        name: 'Smartphone',
        category: 'Electrónica',
        price: 699.99,
        inStock: true,
        rating: 4.3,
      },
      {
        id: 5,
        name: 'Zapatillas de running',
        category: 'Deportes',
        price: 89.99,
        inStock: false,
        rating: 4.1,
      },
      {
        id: 6,
        name: 'Lámpara de escritorio',
        category: 'Hogar',
        price: 39.99,
        inStock: true,
        rating: 4.0,
      },
      { id: 7, name: 'Mochila', category: 'Viaje', price: 59.99, inStock: true, rating: 4.4 },
      {
        id: 8,
        name: 'Botella de agua',
        category: 'Deportes',
        price: 19.99,
        inStock: true,
        rating: 4.6,
      },
    ];
  });
</script>

<gstock-data-grid hoverable></gstock-data-grid>

<script type="module">
  customElements.whenDefined('gstock-data-grid').then(() => {
    
    const grid = document.querySelector('gstock-data-grid');

    grid.columns = [
      { key: 'name', title: 'Nombre', sortable: true },
      { key: 'email', title: 'Correo electrónico', sortable: true },
      { key: 'role', title: 'Rol', sortable: true },
      { key: 'status', title: 'Estado', sortable: true, align: 'center' },
    ];

    grid.data = [
      {
        id: 1,
        name: 'Juan Pérez',
        email: 'juan.perez@example.com',
        role: 'Administrador',
        status: 'Activo',
      },
      {
        id: 2,
        name: 'María García',
        email: 'maria.garcia@example.com',
        role: 'Usuario',
        status: 'Activo',
      },
      {
        id: 3,
        name: 'Carlos López',
        email: 'carlos.lopez@example.com',
        role: 'Editor',
        status: 'Inactivo',
      },
      {
        id: 4,
        name: 'Ana Rodríguez',
        email: 'ana.rodriguez@example.com',
        role: 'Usuario',
        status: 'Activo',
      },
      {
        id: 5,
        name: 'Luis Martín',
        email: 'luis.martin@example.com',
        role: 'Editor',
        status: 'Activo',
      },
    ];
  });
</script>

<gstock-data-grid size="small" compact></gstock-data-grid>

<script type="module">
  customElements.whenDefined('gstock-data-grid').then(() => {
    
    const grid = document.querySelector('gstock-data-grid');

    // Configure columns
    grid.columns = [
      { key: 'id', title: 'ID', sortable: true, width: '60px' },
      { key: 'code', title: 'Code', sortable: true, width: '100px' },
      { key: 'name', title: 'Item Name', sortable: true },
      {
        key: 'quantity',
        title: 'Qty',
        sortable: true,
        type: 'number',
        align: 'center',
        width: '80px',
      },
      { key: 'unit', title: 'Unit', sortable: true, width: '80px' },
      {
        key: 'price',
        title: 'Price',
        sortable: true,
        type: 'currency',
        align: 'center',
        width: '100px',
      },
      {
        key: 'total',
        title: 'Total',
        sortable: true,
        type: 'currency',
        align: 'center',
        width: '100px',
      },
      {
        key: 'status',
        title: 'Status',
        sortable: true,
        width: '150px',
      },
    ];

    const sampleData = [
      {
        id: 1,
        code: 'ITM001',
        name: 'Widget A',
        quantity: 25,
        unit: 'pcs',
        price: 12.5,
        total: 312.5,
        status: 'Active',
      },
      {
        id: 2,
        code: 'ITM002',
        name: 'Component B',
        quantity: 50,
        unit: 'pcs',
        price: 8.75,
        total: 437.5,
        status: 'Active',
      },
      {
        id: 3,
        code: 'ITM003',
        name: 'Part C',
        quantity: 100,
        unit: 'pcs',
        price: 3.2,
        total: 320.0,
        status: 'Low Stock',
      },
      {
        id: 4,
        code: 'ITM004',
        name: 'Assembly D',
        quantity: 15,
        unit: 'sets',
        price: 45.0,
        total: 675.0,
        status: 'Active',
      },
      {
        id: 5,
        code: 'ITM005',
        name: 'Tool E',
        quantity: 8,
        unit: 'pcs',
        price: 125.0,
        total: 1000.0,
        status: 'Active',
      },
      {
        id: 6,
        code: 'ITM006',
        name: 'Material F',
        quantity: 200,
        unit: 'kg',
        price: 2.25,
        total: 450.0,
        status: 'Active',
      },
      {
        id: 7,
        code: 'ITM007',
        name: 'Equipment G',
        quantity: 3,
        unit: 'units',
        price: 850.0,
        total: 2550.0,
        status: 'Reserved',
      },
      {
        id: 8,
        code: 'ITM008',
        name: 'Supply H',
        quantity: 75,
        unit: 'boxes',
        price: 15.6,
        total: 1170.0,
        status: 'Active',
      },
      {
        id: 9,
        code: 'ITM009',
        name: 'Kit I',
        quantity: 12,
        unit: 'sets',
        price: 78.9,
        total: 946.8,
        status: 'Discontinued',
      },
      {
        id: 10,
        code: 'ITM010',
        name: 'Module J',
        quantity: 30,
        unit: 'pcs',
        price: 28.4,
        total: 852.0,
        status: 'Active',
      },
    ];

    grid.data = sampleData;
  });
</script>

<div class="selection-actions">
  <gstock-button id="clear-selection-btn" color="secondary" variant="outlined">
    Limpiar selección
  </gstock-button>
  <gstock-button id="perform-action-btn">Acción sobre seleccionado</gstock-button>
</div>

<div class="selection-info">
  <div id="selection-info">
    Seleccionados:
    <strong>0</strong>
    filas
  </div>
</div>

<gstock-data-grid selectable></gstock-data-grid>

<script type="module">
  customElements.whenDefined('gstock-data-grid').then(() => {
    
    const grid = document.querySelector('gstock-data-grid');
    const selectionInfo = document.querySelector('#selection-info');
    const clearSelectionBtn = document.querySelector('#clear-selection-btn');
    const performActionBtn = document.querySelector('#perform-action-btn');

    grid.columns = [
      { key: 'name', title: 'Nombre', sortable: true },
      { key: 'email', title: 'Correo electrónico', sortable: true },
      { key: 'role', title: 'Rol', sortable: true },
      { key: 'status', title: 'Estado', sortable: true, align: 'center' },
    ];

    grid.data = [
      {
        id: 1,
        name: 'Juan Pérez',
        email: 'juan.perez@example.com',
        role: 'Administrador',
        status: 'Activo',
      },
      {
        id: 2,
        name: 'María García',
        email: 'maria.garcia@example.com',
        role: 'Usuario',
        status: 'Activo',
      },
      {
        id: 3,
        name: 'Carlos López',
        email: 'carlos.lopez@example.com',
        role: 'Editor',
        status: 'Inactivo',
      },
      {
        id: 4,
        name: 'Ana Rodríguez',
        email: 'ana.rodriguez@example.com',
        role: 'Usuario',
        status: 'Activo',
      },
      {
        id: 5,
        name: 'Luis Martín',
        email: 'luis.martin@example.com',
        role: 'Editor',
        status: 'Activo',
      },
    ];

    grid.addEventListener('gstock-data-grid-selection-change-event', e => {
      updateSelectionInfo();
    });

    function updateSelectionInfo() {
      const selectedRows = grid.getSelectedRows();
      const count = selectedRows.length;
      selectionInfo.innerHTML = `Seleccionados: <strong>${count}</strong> ${count === 1 ? 'fila' : 'filas'}`;
    }

    function clearSelection() {
      grid.deselectAll();
    }

    function performAction() {
      const selectedRows = grid.getSelectedRows();
      if (selectedRows.length === 0) {
        alert('Por favor, selecciona una fila para realizar una acción.');
        return;
      }

      const selectedRow = selectedRows[0];
      alert(`Acción realizada sobre: ${selectedRow.name}`);
    }

    clearSelectionBtn.addEventListener('click', clearSelection);
    performActionBtn.addEventListener('click', performAction);

    updateSelectionInfo();
  });
</script>

<style>
  .selection-info {
    background: var(--gstock-color-neutral-100);
    padding: 1rem;
    border-radius: var(--gstock-border-radius-md);
    margin: 1rem 0;
    border-left: 4px solid var(--gstock-color-primary-500);
    font-size: 0.875rem;
  }

  .selection-actions {
    margin: 1rem 0;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
  }
</style>

<div class="selection-actions">
  <gstock-button id="select-all-btn" color="secondary" variant="outlined">
    Seleccionar página
  </gstock-button>
  <gstock-button id="deselect-all-btn" color="secondary" variant="outlined">
    Deseleccionar página
  </gstock-button>
  <gstock-button id="clear-selection-btn" color="secondary" variant="outlined">
    Limpiar todo
  </gstock-button>
  <gstock-button id="perform-action-btn" disabled>Acción sobre seleccionados</gstock-button>
</div>

<div class="selection-info">
  <div id="selection-info">
    Seleccionados:
    <strong>0</strong>
    filas
  </div>
</div>

<gstock-data-grid selectable multi-select paginated page-size="5" current-page="1" total-pages="3" total-items="15"></gstock-data-grid>

<script type="module">
  customElements.whenDefined('gstock-data-grid').then(() => {
    
    const grid = document.querySelector('gstock-data-grid');
    const selectionInfo = document.querySelector('#selection-info');
    const selectAllBtn = document.querySelector('#select-all-btn');
    const deselectAllBtn = document.querySelector('#deselect-all-btn');
    const clearSelectionBtn = document.querySelector('#clear-selection-btn');
    const performActionBtn = document.querySelector('#perform-action-btn');

    grid.columns = [
      { key: 'name', title: 'Nombre' },
      { key: 'email', title: 'Correo electrónico' },
      { key: 'role', title: 'Rol' },
      { key: 'status', title: 'Estado', align: 'center' },
    ];

    const roles = ['Administrador', 'Usuario', 'Editor'];
    const statuses = ['Activo', 'Activo', 'Activo', 'Inactivo'];
    const names = [
      'Juan Pérez',
      'María García',
      'Carlos López',
      'Ana Rodríguez',
      'Luis Martín',
      'Elena Ruiz',
      'Miguel Sánchez',
      'Laura Torres',
      'David Herrera',
      'Carmen Vega',
      'Pablo Iglesias',
      'Sofía Castro',
      'Andrés Núñez',
      'Lucía Romero',
      'Javier Soto',
    ];

    const accentMap = { á: 'a', é: 'e', í: 'i', ó: 'o', ú: 'u' };
    const toEmail = name =>
      name
        .toLowerCase()
        .replace(/[áéíóú]/g, char => accentMap[char])
        .replace(/\s+/g, '.');

    const allRows = names.map((name, i) => ({
      id: i + 1,
      name,
      email: `${toEmail(name)}@example.com`,
      role: roles[i % roles.length],
      status: statuses[i % statuses.length],
    }));

    function loadPage(page, pageSize) {
      const start = (page - 1) * pageSize;
      grid.data = allRows.slice(start, start + pageSize);
    }

    grid.addEventListener('gstock-page-change-event', event => {
      loadPage(event.detail.currentPage, grid.pageSize);
    });

    grid.addEventListener('gstock-page-size-change-event', event => {
      grid.totalPages = Math.ceil(allRows.length / event.detail.currentPageSize);
      loadPage(event.detail.currentPage, event.detail.currentPageSize);
    });

    // Selections persist across server-side pages: every selection-change event
    // returns the full accumulated set, not just the rows on the visible page.
    grid.addEventListener('gstock-data-grid-selection-change-event', event => {
      const selectedCount = event.detail.selectedData.length;
      selectionInfo.innerHTML = `Seleccionados: <strong>${selectedCount}</strong> filas`;
      performActionBtn.disabled = selectedCount === 0;
    });

    selectAllBtn.addEventListener('click', () => grid.selectAll());
    deselectAllBtn.addEventListener('click', () => grid.deselectAll());
    clearSelectionBtn.addEventListener('click', () => grid.clearSelection());

    performActionBtn.addEventListener('click', () => {
      const selected = grid.getSelectedRows();
      if (selected.length > 0) {
        alert(
          `Realizando acción sobre ${selected.length} filas seleccionadas:\n${selected.map(row => row.name).join(', ')}`,
        );
      } else {
        alert('No hay filas seleccionadas');
      }
    });

    loadPage(1, 5);
  });
</script>

<style>
  .selection-actions {
    margin-bottom: 1rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
  }

  .selection-info {
    margin-bottom: 1rem;
    padding: 0.75rem;
    background-color: var(--gstock-color-neutral-50);
    border: 1px solid var(--gstock-color-neutral-200);
    border-radius: var(--gstock-border-radius-md);
  }

  #selection-info {
    margin: 0;
    font-size: var(--gstock-legacy-font-size-small);
  }
</style>

<gstock-data-grid sortable></gstock-data-grid>

<script type="module">
  customElements.whenDefined('gstock-data-grid').then(() => {
    
    const grid = document.querySelector('gstock-data-grid');

    grid.columns = [
      { key: 'name', title: 'Nombre', sortable: true },
      { key: 'email', title: 'Correo electrónico', sortable: true },
      { key: 'role', title: 'Rol', sortable: true },
      { key: 'status', title: 'Estado', sortable: true, align: 'center' },
      { key: 'lastLogin', title: 'Último acceso', sortable: true, type: 'date' },
    ];

    grid.data = [
      {
        id: 1,
        name: 'Juan Pérez',
        email: 'juan.perez@example.com',
        role: 'Administrador',
        status: 'Activo',
        lastLogin: '2024-01-15',
      },
      {
        id: 2,
        name: 'María García',
        email: 'maria.garcia@example.com',
        role: 'Usuario',
        status: 'Activo',
        lastLogin: '2024-01-14',
      },
      {
        id: 3,
        name: 'Carlos López',
        email: 'carlos.lopez@example.com',
        role: 'Editor',
        status: 'Inactivo',
        lastLogin: '2024-01-10',
      },
      {
        id: 4,
        name: 'Ana Rodríguez',
        email: 'ana.rodriguez@example.com',
        role: 'Usuario',
        status: 'Activo',
        lastLogin: '2024-01-16',
      },
      {
        id: 5,
        name: 'Luis Martín',
        email: 'luis.martin@example.com',
        role: 'Editor',
        status: 'Activo',
        lastLogin: '2024-01-12',
      },
    ];

    grid.addEventListener('gstock-data-grid-sort-change-event', event => {
      console.log('Sort changed:', event.detail);
    });
  });
</script>

<div class="filter-controls">
  <div class="filter-group">
    <gstock-input type="text" id="name-filter" label="Name Filter" placeholder="Search by name..."></gstock-input>
  </div>

  <div class="filter-group">
    <gstock-select id="department-filter" label="Department">
      <gstock-option value>All Departments</gstock-option>
      <gstock-option value="Engineering">Engineering</gstock-option>
      <gstock-option value="Marketing">Marketing</gstock-option>
      <gstock-option value="Sales">Sales</gstock-option>
      <gstock-option value="HR">HR</gstock-option>
      <gstock-option value="Finance">Finance</gstock-option>
    </gstock-select>
  </div>

  <div class="filter-group">
    <gstock-input type="number" id="salary-min" placeholder="0" min="0" step="1000" label="Min Salary"></gstock-input>
  </div>

  <div class="filter-group">
    <gstock-input type="number" id="salary-max" placeholder="200000" min="0" step="1000" label="Max Salary"></gstock-input>
  </div>

  <div class="filter-actions">
    <gstock-button id="apply-filters-btn" class="primary">Apply Filters</gstock-button>
    <gstock-button id="clear-filters-btn">Clear All</gstock-button>
  </div>
</div>

<div class="filter-status" id="filter-status">Showing all 12 records</div>

<gstock-data-grid filterable></gstock-data-grid>

<script type="module">
  customElements.whenDefined('gstock-data-grid').then(() => {
    
    const grid = document.querySelector('gstock-data-grid');
    const filterStatus = document.querySelector('#filter-status');
    const applyFiltersBtn = document.querySelector('#apply-filters-btn');
    const clearFiltersBtn = document.querySelector('#clear-filters-btn');

    grid.columns = [
      { key: 'id', title: 'ID', sortable: true, width: '60px' },
      { key: 'name', title: 'Employee Name', sortable: true, filterable: true },
      { key: 'department', title: 'Department', sortable: true, filterable: true },
      { key: 'position', title: 'Position', sortable: true },
      { key: 'salary', title: 'Salary', sortable: true, align: 'right' },
      { key: 'startDate', title: 'Start Date', sortable: true, type: 'date' },
      { key: 'email', title: 'Email', sortable: true, filterable: true },
    ];

    const originalData = [
      {
        id: 1,
        name: 'John Smith',
        department: 'Engineering',
        position: 'Software Engineer',
        salary: 85000,
        startDate: '2023-01-15',
        email: 'john.smith@company.com',
      },
      {
        id: 2,
        name: 'Sarah Johnson',
        department: 'Marketing',
        position: 'Marketing Manager',
        salary: 75000,
        startDate: '2022-11-20',
        email: 'sarah.johnson@company.com',
      },
      {
        id: 3,
        name: 'Mike Davis',
        department: 'Sales',
        position: 'Sales Representative',
        salary: 55000,
        startDate: '2023-03-10',
        email: 'mike.davis@company.com',
      },
      {
        id: 4,
        name: 'Emily Chen',
        department: 'Engineering',
        position: 'Senior Developer',
        salary: 95000,
        startDate: '2021-09-05',
        email: 'emily.chen@company.com',
      },
      {
        id: 5,
        name: 'David Wilson',
        department: 'HR',
        position: 'HR Specialist',
        salary: 60000,
        startDate: '2022-07-12',
        email: 'david.wilson@company.com',
      },
      {
        id: 6,
        name: 'Lisa Anderson',
        department: 'Finance',
        position: 'Financial Analyst',
        salary: 70000,
        startDate: '2023-02-28',
        email: 'lisa.anderson@company.com',
      },
      {
        id: 7,
        name: 'Chris Taylor',
        department: 'Engineering',
        position: 'DevOps Engineer',
        salary: 88000,
        startDate: '2022-12-01',
        email: 'chris.taylor@company.com',
      },
      {
        id: 8,
        name: 'Amanda Brown',
        department: 'Marketing',
        position: 'Content Specialist',
        salary: 52000,
        startDate: '2023-04-18',
        email: 'amanda.brown@company.com',
      },
      {
        id: 9,
        name: 'Robert Lee',
        department: 'Sales',
        position: 'Sales Manager',
        salary: 82000,
        startDate: '2021-08-30',
        email: 'robert.lee@company.com',
      },
      {
        id: 10,
        name: 'Jennifer White',
        department: 'Finance',
        position: 'Senior Accountant',
        salary: 78000,
        startDate: '2022-05-15',
        email: 'jennifer.white@company.com',
      },
      {
        id: 11,
        name: 'Kevin Martinez',
        department: 'Engineering',
        position: 'Tech Lead',
        salary: 105000,
        startDate: '2020-11-12',
        email: 'kevin.martinez@company.com',
      },
      {
        id: 12,
        name: 'Michelle Garcia',
        department: 'HR',
        position: 'HR Manager',
        salary: 85000,
        startDate: '2021-06-08',
        email: 'michelle.garcia@company.com',
      },
    ];

    grid.data = originalData;

    grid.addEventListener('gstock-data-grid-filter-change-event', e => {
      updateFilterStatus();
    });

    function applyFilters() {
      const nameFilter = document.querySelector('#name-filter').value.toLowerCase();
      const departmentFilter = document.querySelector('#department-filter').value;
      const salaryMin = parseInt(document.querySelector('#salary-min').value) || 0;
      const salaryMax = parseInt(document.querySelector('#salary-max').value) || Infinity;

      let filteredData = originalData.filter(item => {
        const nameMatch = !nameFilter || item.name.toLowerCase().includes(nameFilter);
        const departmentMatch = !departmentFilter || item.department === departmentFilter;
        const salaryMatch = item.salary >= salaryMin && item.salary <= salaryMax;

        return nameMatch && departmentMatch && salaryMatch;
      });

      grid.data = filteredData;
      updateFilterStatus();
    }

    function clearFilters() {
      document.querySelector('#name-filter').value = '';
      document.querySelector('#department-filter').value = '';
      document.querySelector('#salary-min').value = '';
      document.querySelector('#salary-max').value = '';

      grid.data = originalData;
      grid.clearFilters();
      updateFilterStatus();
    }

    function updateFilterStatus() {
      const currentData = grid.data || [];
      const total = originalData.length;
      const showing = currentData.length;

      if (showing === total) {
        filterStatus.textContent = `Showing all ${total} records`;
      } else {
        filterStatus.textContent = `Showing ${showing} of ${total} records (filtered)`;
      }
    }

    applyFiltersBtn.addEventListener('click', applyFilters);
    clearFiltersBtn.addEventListener('click', clearFilters);

    document.querySelector('#name-filter').addEventListener('input', applyFilters);
    document.querySelector('#department-filter').addEventListener('change', applyFilters);
    document.querySelector('#salary-min').addEventListener('input', applyFilters);
    document.querySelector('#salary-max').addEventListener('input', applyFilters);

    updateFilterStatus();
  });
</script>

<style>
  .filter-controls {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 4px;
    margin: 1rem 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
  }

  .filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .filter-group label {
    font-weight: 600;
    font-size: 14px;
    color: #333;
  }

  .filter-group input,
  .filter-group select {
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
  }

  .filter-actions {
    display: flex;
    gap: 0.5rem;
    align-items: end;
  }

  .filter-actions button {
    padding: 0.5rem 1rem;
    border: 1px solid #ddd;
    background: white;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    height: fit-content;
  }

  .filter-actions button:hover {
    background: #f8f9fa;
  }

  .filter-actions button.primary {
    background: #007bff;
    color: white;
    border-color: #007bff;
  }

  .filter-actions button.primary:hover {
    background: #0056b3;
  }

  .filter-status {
    margin: 1rem 0;
    padding: 0.5rem;
    background: #e3f2fd;
    border-radius: 4px;
    font-size: 14px;
  }
</style>

<gstock-data-grid paginated page-size="3" show-page-size-selector></gstock-data-grid>

<div class="pagination-status">
  <strong>Estado de la paginación:</strong>
  <div id="pagination-info">Página actual: 1 | Tamaño de página: 3 | Total de elementos: 10</div>
</div>

<script type="module">
  customElements.whenDefined('gstock-data-grid').then(() => {
    
    const grid = document.querySelector('gstock-data-grid');
    const paginationInfo = document.querySelector('#pagination-info');

    grid.columns = [
      { key: 'name', title: 'Nombre', sortable: true },
      { key: 'email', title: 'Correo electrónico', sortable: true },
      { key: 'role', title: 'Rol', sortable: true },
      { key: 'status', title: 'Estado', sortable: true, align: 'center' },
    ];

    grid.data = [
      {
        id: 1,
        name: 'Juan Pérez',
        email: 'juan.perez@example.com',
        role: 'Administrador',
        status: 'Activo',
      },
      {
        id: 2,
        name: 'María García',
        email: 'maria.garcia@example.com',
        role: 'Usuario',
        status: 'Activo',
      },
      {
        id: 3,
        name: 'Carlos López',
        email: 'carlos.lopez@example.com',
        role: 'Editor',
        status: 'Inactivo',
      },
      {
        id: 4,
        name: 'Ana Rodríguez',
        email: 'ana.rodriguez@example.com',
        role: 'Usuario',
        status: 'Activo',
      },
      {
        id: 5,
        name: 'Luis Martín',
        email: 'luis.martin@example.com',
        role: 'Editor',
        status: 'Activo',
      },
      {
        id: 6,
        name: 'Elena Ruiz',
        email: 'elena.ruiz@example.com',
        role: 'Usuario',
        status: 'Activo',
      },
      {
        id: 7,
        name: 'Miguel Sánchez',
        email: 'miguel.sanchez@example.com',
        role: 'Administrador',
        status: 'Activo',
      },
      {
        id: 8,
        name: 'Laura Torres',
        email: 'laura.torres@example.com',
        role: 'Editor',
        status: 'Inactivo',
      },
      {
        id: 9,
        name: 'David Herrera',
        email: 'david.herrera@example.com',
        role: 'Usuario',
        status: 'Activo',
      },
      {
        id: 10,
        name: 'Carmen Vega',
        email: 'carmen.vega@example.com',
        role: 'Editor',
        status: 'Activo',
      },
    ];

    const updateInfo = () => {
      const info = `Página actual: ${grid.currentPage} | Tamaño de página: ${grid.pageSize} | Total de elementos: ${grid.data.length}`;
      paginationInfo.textContent = info;
    };

    grid.addEventListener('gstock-page-change-event', event => {
      console.log('📄 Page changed:', event.detail);
      updateInfo();
    });

    grid.addEventListener('gstock-page-size-change-event', event => {
      console.log('📏 Page size changed:', event.detail);
      updateInfo();
    });

    grid.updateComplete.then(() => {
      updateInfo();
    });
  });
</script>

<style>
  .pagination-status {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--gstock-color-neutral-100);
    border-radius: var(--gstock-border-radius-md);
  }
</style>

<gstock-data-grid paginated page-size="5" current-page="1" total-pages="10" total-items="50" show-page-size-selector></gstock-data-grid>

<div class="info-box">
  <strong>Paginación del servidor:</strong>
  <div id="server-info">Cargando datos desde el servidor...</div>
  <div class="info-tip">
    💡 Los datos se cargan desde el servidor cuando cambias de página o el tamaño de página.
  </div>
</div>

<script type="module">
  customElements.whenDefined('gstock-data-grid').then(() => {
    
    const grid = document.querySelector('gstock-data-grid');
    const serverInfo = document.querySelector('#server-info');

    grid.columns = [
      { key: 'id', title: 'ID', sortable: true, width: '80px' },
      { key: 'name', title: 'Nombre', sortable: true },
      { key: 'email', title: 'Correo electrónico', sortable: true },
      { key: 'department', title: 'Departamento', sortable: true },
      { key: 'joinDate', title: 'Fecha de ingreso', sortable: true, align: 'center' },
    ];

    function loadPageData(page, pageSize, isInitialLoad = false) {
      if (isInitialLoad) {
        grid.loading = true;
      }

      serverInfo.textContent = `Cargando página ${page} con ${pageSize} elementos por página...`;

      setTimeout(() => {
        const pageData = [];
        const startId = (page - 1) * pageSize + 1;
        const itemsToLoad = Math.min(pageSize, 50 - (page - 1) * pageSize);

        const departments = ['Ingeniería', 'Marketing', 'Ventas', 'RRHH', 'Finanzas'];
        const names = [
          'Juan Pérez',
          'María García',
          'Carlos López',
          'Ana Rodríguez',
          'Luis Martín',
          'Elena Ruiz',
          'Miguel Sánchez',
          'Laura Torres',
          'David Herrera',
          'Carmen Vega',
        ];

        for (let i = 0; i < itemsToLoad; i++) {
          const id = startId + i;
          const nameIndex = (id - 1) % names.length;
          pageData.push({
            id: id,
            name: `${names[nameIndex]} ${id}`,
            email: `empleado${id}@empresa.com`,
            department: departments[id % departments.length],
            joinDate: `2023-${String(Math.floor(Math.random() * 12) + 1).padStart(2, '0')}-${String(Math.floor(Math.random() * 28) + 1).padStart(2, '0')}`,
          });
        }

        grid.data = pageData;
        grid.loading = false;

        serverInfo.textContent = `✅ Página ${page} cargada | Mostrando ${itemsToLoad} de 50 elementos totales | Tamaño de página: ${pageSize}`;
      }, 800);
    }

    grid.addEventListener('gstock-page-change-event', event => {
      console.log('Server-side page change:', event.detail);
      loadPageData(event.detail.currentPage, grid.pageSize, false);
    });

    grid.addEventListener('gstock-page-size-change-event', event => {
      console.log('Server-side page size change:', event.detail);

      const newTotalPages = Math.ceil(event.detail.totalItems / event.detail.currentPageSize);
      grid.totalPages = newTotalPages;

      loadPageData(event.detail.currentPage, event.detail.currentPageSize, false);
    });

    loadPageData(1, 5, true);
  });
</script>

<style>
  .info-box {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--gstock-color-neutral-100);
    border-radius: var(--gstock-border-radius-md);
  }

  .info-tip {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--gstock-color-neutral-600);
  }
</style>

<gstock-data-grid resizable bordered hoverable></gstock-data-grid>

<script type="module">
  customElements.whenDefined('gstock-data-grid').then(() => {
    
    const grid = document.querySelector('gstock-data-grid');

    grid.columns = [
      {
        key: 'id',
        title: 'ID',
        width: '60px',
        resizable: true,
        sortable: true,
      },
      {
        key: 'name',
        title: 'Nombre del producto',
        resizable: true,
        sortable: true,
      },
      {
        key: 'category',
        title: 'Categoría',
        width: '200px',
        resizable: true,
        sortable: true,
      },
      {
        key: 'price',
        title: 'Precio',
        width: '150px',
        align: 'right',
        resizable: true,
        sortable: true,
        formatter: value => `€${parseFloat(value).toFixed(2)}`,
      },
      {
        key: 'stock',
        title: 'Stock',
        width: '150px',
        align: 'center',
        resizable: true,
        sortable: true,
      },
      {
        key: 'status',
        title: 'Estado',
        width: '200px',
        align: 'center',
        resizable: false, // This column cannot be resized
        formatter: value => {
          const color =
            value === 'Disponible' ? 'success' : value === 'Stock bajo' ? 'warning' : 'danger';
          return `<gstock-badge color="${color}">${value}</gstock-badge>`;
        },
      },
    ];

    // Sample data
    grid.data = [
      {
        id: 1,
        name: 'Laptop Dell XPS 13',
        category: 'Electrónica',
        price: 999.99,
        stock: 15,
        status: 'Disponible',
      },
      {
        id: 2,
        name: 'Ratón inalámbrico Logitech',
        category: 'Accesorios',
        price: 29.99,
        stock: 3,
        status: 'Stock bajo',
      },
      {
        id: 3,
        name: 'Teclado mecánico',
        category: 'Accesorios',
        price: 79.99,
        stock: 0,
        status: 'Agotado',
      },
      {
        id: 4,
        name: 'Monitor 4K Samsung',
        category: 'Electrónica',
        price: 349.99,
        stock: 8,
        status: 'Disponible',
      },
      {
        id: 5,
        name: 'Hub USB-C',
        category: 'Accesorios',
        price: 49.99,
        stock: 12,
        status: 'Disponible',
      },
      {
        id: 6,
        name: 'Webcam HD',
        category: 'Electrónica',
        price: 89.99,
        stock: 2,
        status: 'Stock bajo',
      },
    ];

    // Listen for column resize events
    grid.addEventListener('gstock-data-grid-column-resize-event', event => {
      console.log('Column resized:', {
        column: event.detail.column,
        newWidth: event.detail.width,
        allColumnWidths: event.detail.columnWidths,
      });
    });
  });
</script>

<gstock-data-grid id="expandable-grid" expandable></gstock-data-grid>

<script type="module">
  customElements.whenDefined('gstock-data-grid').then(() => {
    
    const grid = document.querySelector('#expandable-grid');

    grid.columns = [
      {
        key: 'expand',
        title: '',
        width: '50px',
        formatter: (value, row, index, dataGrid) => {
          const isExpanded = dataGrid?.isRowExpanded(row.id);

          const button = document.createElement('gstock-icon-button');
          button.setAttribute('name', isExpanded ? 'chevron-down' : 'chevron-right');
          button.setAttribute('size', 'small');
          button.setAttribute('data-expand-button', '');

          return button;
        },
      },
      { key: 'name', title: 'Nombre' },
      { key: 'email', title: 'Correo electrónico' },
      { key: 'role', title: 'Rol' },
    ];

    grid.data = [
      {
        id: 1,
        name: 'Juan Pérez',
        email: 'juan.perez@example.com',
        role: 'Administrador',
        phone: '+34 600 123 456',
        department: 'Tecnología',
      },
      {
        id: 2,
        name: 'María García',
        email: 'maria.garcia@example.com',
        role: 'Usuario',
        phone: '+34 600 234 567',
        department: 'Marketing',
      },
      {
        id: 3,
        name: 'Carlos López',
        email: 'carlos.lopez@example.com',
        role: 'Editor',
        phone: '+34 600 345 678',
        department: 'Contenido',
      },
    ];

    grid.expandedContentRenderer = (row, index, columns) => {
      return `
        <div class="expanded-content">
          <div class="expanded-row">
            <div class="expanded-item">
              <strong>Teléfono:</strong>
              <span>${row.phone}</span>
            </div>
            <div class="expanded-item">
              <strong>Departamento:</strong>
              <span>${row.department}</span>
            </div>
          </div>
        </div>
      `;
    };
  });
</script>

<style>
  .expanded-content {
    padding: var(--gstock-space-padding-block-xl);
  }

  .expanded-row {
    display: flex;
    gap: var(--gstock-space-gap-2xl);
    flex-wrap: wrap;
  }

  .expanded-item {
    display: flex;
    flex-direction: column;
    gap: var(--gstock-space-gap-sm);
  }

  .expanded-item strong {
    font-size: var(--gstock-typography-font-size-xs);
    color: var(--gstock-color-text-subtle);
    text-transform: uppercase;
  }

  .expanded-item span {
    font-size: var(--gstock-typography-font-size-sm);
    color: var(--gstock-color-text);
  }
</style>

<gstock-data-grid id="expandable-paginated-grid" expandable paginated page-size="5"></gstock-data-grid>

<div class="test-info">
  <strong>🧪 Prueba del bug de índices:</strong>
  <ol>
    <li>Expande la primera fila de la página 1 → Debe mostrar "Índice global: 0"</li>
    <li>Ve a la página 2</li>
    <li>Expande la primera fila de la página 2 → Debe mostrar "Índice global: 5" (NO 0)</li>
    <li>Ve a la página 3</li>
    <li>Expande la primera fila de la página 3 → Debe mostrar "Índice global: 10" (NO 0)</li>
  </ol>
</div>

<script type="module">
  customElements.whenDefined('gstock-data-grid').then(() => {
    
    const grid = document.querySelector('#expandable-paginated-grid');

    grid.columns = [
      {
        key: 'expand',
        title: '',
        width: '50px',
        formatter: (value, row, index, dataGrid) => {
          const isExpanded = dataGrid?.isRowExpanded(row.id);

          const button = document.createElement('gstock-icon-button');
          button.setAttribute('name', isExpanded ? 'chevron-down' : 'chevron-right');
          button.setAttribute('size', 'small');
          button.setAttribute('data-expand-button', '');

          return button;
        },
      },
      { key: 'id', title: 'ID', width: '80px' },
      { key: 'name', title: 'Nombre' },
      { key: 'email', title: 'Correo electrónico' },
      { key: 'role', title: 'Rol' },
    ];

    grid.data = Array.from({ length: 15 }, (_, i) => ({
      id: i + 1,
      name: `Usuario ${i + 1}`,
      email: `usuario${i + 1}@example.com`,
      role: ['Administrador', 'Usuario', 'Editor'][i % 3],
      phone: `+34 600 ${String(i).padStart(3, '0')} ${String(i * 11).padStart(3, '0')}`,
      department: ['Tecnología', 'Marketing', 'Contenido', 'Ventas', 'RRHH'][i % 5],
    }));

    grid.expandedContentRenderer = (row, index, columns) => {
      return `
        <div class="expanded-content">
          <div class="test-result">
            <gstock-icon name="info"></gstock-icon>
            <strong>Índice global recibido:</strong>
            <span class="index-badge">${index}</span>
          </div>
          <div class="expected-result">
            <strong>Índice esperado según ID:</strong>
            <span>${row.id - 1}</span>
          </div>
          ${
            index !== row.id - 1
              ? `
            <div class="error-message">
              <gstock-icon name="exclamation-triangle"></gstock-icon>
              <strong>❌ ERROR: El índice NO coincide!</strong>
            </div>
          `
              : `
            <div class="success-message">
              <gstock-icon name="check-circle"></gstock-icon>
              <strong>✅ CORRECTO: El índice coincide</strong>
            </div>
          `
          }
          <div class="expanded-row">
            <div class="expanded-item">
              <strong>Teléfono:</strong>
              <span>${row.phone}</span>
            </div>
            <div class="expanded-item">
              <strong>Departamento:</strong>
              <span>${row.department}</span>
            </div>
          </div>
        </div>
      `;
    };
  });
</script>

<style>
  .test-info {
    margin-bottom: var(--gstock-space-margin-bottom-lg);
    padding: var(--gstock-space-padding-block-lg);
    background: var(--gstock-color-background-info-subtle);
    border-radius: var(--gstock-border-radius-md);
    border-left: 4px solid var(--gstock-color-border-info);
  }

  .test-info strong {
    display: block;
    margin-bottom: var(--gstock-space-margin-bottom-sm);
    color: var(--gstock-color-text-info);
  }

  .test-info ol {
    margin: 0;
    padding-left: var(--gstock-space-padding-inline-xl);
  }

  .test-info li {
    margin-bottom: var(--gstock-space-margin-bottom-xs);
    color: var(--gstock-color-text-primary);
  }

  .expanded-content {
    padding: var(--gstock-space-padding-block-xl);
    display: flex;
    flex-direction: column;
    gap: var(--gstock-space-gap-lg);
  }

  .test-result {
    display: flex;
    align-items: center;
    gap: var(--gstock-space-gap-md);
    padding: var(--gstock-space-padding-block-md);
    background: var(--gstock-color-background-neutral-subtle);
    border-radius: var(--gstock-border-radius-sm);
  }

  .test-result gstock-icon {
    font-size: var(--gstock-typography-font-size-xl);
    color: var(--gstock-color-text-info);
  }

  .index-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3rem;
    padding: var(--gstock-space-padding-block-xs) var(--gstock-space-padding-inline-sm);
    background: var(--gstock-color-background-primary);
    color: var(--gstock-color-text-on-primary);
    border-radius: var(--gstock-border-radius-full);
    font-weight: var(--gstock-typography-font-weight-bold);
    font-size: var(--gstock-typography-font-size-lg);
  }

  .expected-result {
    display: flex;
    align-items: center;
    gap: var(--gstock-space-gap-md);
    padding: var(--gstock-space-padding-block-sm);
    color: var(--gstock-color-text-subtle);
    font-size: var(--gstock-typography-font-size-sm);
  }

  .error-message {
    display: flex;
    align-items: center;
    gap: var(--gstock-space-gap-md);
    padding: var(--gstock-space-padding-block-md);
    background: var(--gstock-color-background-danger-subtle);
    color: var(--gstock-color-text-danger);
    border-radius: var(--gstock-border-radius-sm);
    border: 1px solid var(--gstock-color-border-danger);
  }

  .error-message gstock-icon {
    font-size: var(--gstock-typography-font-size-xl);
  }

  .success-message {
    display: flex;
    align-items: center;
    gap: var(--gstock-space-gap-md);
    padding: var(--gstock-space-padding-block-md);
    background: var(--gstock-color-background-success-subtle);
    color: var(--gstock-color-text-success);
    border-radius: var(--gstock-border-radius-sm);
    border: 1px solid var(--gstock-color-border-success);
  }

  .success-message gstock-icon {
    font-size: var(--gstock-typography-font-size-xl);
  }

  .expanded-row {
    display: flex;
    gap: var(--gstock-space-gap-2xl);
    flex-wrap: wrap;
    padding-top: var(--gstock-space-padding-block-md);
    border-top: 1px solid var(--gstock-color-border-subtle);
  }

  .expanded-item {
    display: flex;
    flex-direction: column;
    gap: var(--gstock-space-gap-sm);
  }

  .expanded-item strong {
    font-size: var(--gstock-typography-font-size-xs);
    color: var(--gstock-color-text-subtle);
    text-transform: uppercase;
  }

  .expanded-item span {
    font-size: var(--gstock-typography-font-size-sm);
    color: var(--gstock-color-text-primary);
  }
</style>