Labels Table

Installation

pnpm dlx shadcn@latest add @ecodeliver/labels-table

Installing this item also copies paginated-table.tsx and pudo-selector.tsx.

Usage

Pass the full labels array. Search, point, and status filters are owned inside the component. Wire onDeactivate and onActivate for the row actions.

import { LabelsTable } from "@/components/registry/labels-table";
import { labelTableRows } from "@/mocks";

export function Example() {
  return (
    <LabelsTable
      labels={labelTableRows}
      onDeactivate={(id) => {
        // open confirm dialog for id
      }}
      onActivate={(id) => {
        // open confirm dialog for id
      }}
    />
  );
}

Display

• Rango: rangeFrom - rangeTo
• Parcel Shop: pudo.name and pudo.lineAddress1
• Uso: percent and used/500 (pack size is always 500)
• Estado: Activo, Consumido, or Desactivado
• Última modificación: updatedAt as dd/MM/yy
• Código postal: pudo.postalCode
• Actions: Desactivar etiquetas on active rows, Activar etiquetas on disabled rows. Consumed rows show a disabled Desactivar etiquetas button

Filters (UI labels in Spanish): search by etiqueta or postal code, Punto, Estado (Activas, Consumidas, Desactivadas). Filtering and pagination are client-side.

API Reference

LabelsTable

LabelTableRow