Product List
Product list with status badges and filters
SaaSProducts
Overview
ProductList displays a searchable, sortable table of products with status badges, pricing info, and row-level actions. Supports filters by status and type, bulk operations on selected rows, and customizable empty states.
Usage
import { ProductList } from "@leanicon/web-builder-library/saas";
<ProductList
products={products}
totalCount={100}
page={1}
pageSize={10}
onPageChange={(page) => setPage(page)}
onPageSizeChange={(size) => setPageSize(size)}
filters={filters}
onFiltersChange={setFilters}
sortBy="name"
sortOrder="asc"
onSortChange={(col, order) => handleSort(col, order)}
selectedIds={selectedIds}
onSelectionChange={setSelectedIds}
onBulkAction={(action, ids) => handleBulkAction(action, ids)}
onEdit={(product) => router.push(`/products/${product.id}`)}
onDelete={(product) => handleDelete(product)}
onStatusChange={(product, status) => updateStatus(product, status)}
/>;Variants
Loading
Name | Type | Status | Price | Created | ||
|---|---|---|---|---|---|---|
Showing 1 to 0 of 0 results
Rows per page
Page 1 of 0
Empty
No products found
Try adjusting your filters or create a new product.
Error
Failed to load products. Please try again later.
Default (with data)
Name | Type | Status | Price | Created | ||
|---|---|---|---|---|---|---|
Enterprise Cloud PlatformFull-featured cloud platform with analytics | Service | Published | $299.00 | 1/15/2024 | ||
Starter PlanPerfect for small teams | Service | Published | $49.00 | 1/10/2024 | ||
Professional LicensePerpetual license with lifetime updates | Digital | Draft | $999.00 | 2/1/2024 |
Showing 1 to 3 of 3 results
Rows per page
Page 1 of 1
Dark
Name | Type | Status | Price | Created | ||
|---|---|---|---|---|---|---|
Enterprise Cloud PlatformFull-featured cloud platform with analytics | Service | Published | $299.00 | 1/15/2024 | ||
Starter PlanPerfect for small teams | Service | Draft | $49.00 | 1/10/2024 |
Showing 1 to 2 of 2 results
Rows per page
Page 1 of 1
ProductStatusBadge - All Statuses
DraftIn ReviewApprovedPublishedArchivedRejectedDeprecated
ProductStatusBadge - All Sizes
PublishedPublishedPublished
With Selected Rows
1 selected
Name | Type | Status | Price | Created | ||
|---|---|---|---|---|---|---|
Enterprise CloudCloud platform | Service | Published | $299.00 | 1/15/2024 | ||
Starter PlanSmall teams | Service | Published | $49.00 | 1/10/2024 |
Showing 1 to 2 of 2 results
Rows per page
Page 1 of 1
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
products | Product[] | — | Yes | Array of products to display |
loading | boolean | false | No | Loading state |
error | string | — | No | Error message |
totalCount | number | — | Yes | Total number of products |
page | number | — | Yes | Current page (1-indexed) |
pageSize | number | — | Yes | Items per page |
onPageChange | (page: number) => void | — | Yes | Page change handler |
onPageSizeChange | (size: number) => void | — | Yes | Page size change handler |
filters | ProductListFilters | {} | No | Current filters |
onFiltersChange | (filters: ProductListFilters) => void | — | Yes | Filter change handler |
sortBy | string | — | No | Current sort column |
sortOrder | enum | asc | No | Current sort order |
onSortChange | (column: string, order: "desc" | "asc") => void | — | Yes | Sort change handler |
selectedIds | string[] | [] | No | Currently selected product IDs |
onSelectionChange | (ids: string[]) => void | — | Yes | Selection change handler |
onBulkAction | (action: ProductBulkAction, ids: string[]) => void | — | Yes | Bulk action handler |
onEdit | (product: Product) => void | — | Yes | Edit product handler |
onDelete | (product: Product) => void | — | Yes | Delete product handler |
onStatusChange | (product: Product, status: ProductStatus) => void | — | Yes | Status change handler |
getRowHref | ((product: Product) => string) | — | No | Returns the href for a product row, enabling click-to-navigate |
onCreateProduct | (() => void) | — | No | Handler for creating a new product |
columns | string[] | — | No | Visible columns |
emptyState | ReactNode | — | No | Custom empty state |