Product Table Component for Svelte and React

Manage your products with the help of this product table component written in Svelte and React. Use as a standalone tool, or integrate it into your existing codebase.

The component is fully functional. All data is persisted through the Local Storage API, meaning you can start using the application in your own environment without any additional setups. Changes are automatically saved through a centralized function, which also makes it effortless to connect the application to your backend or database.

This component comes with the following:

• Multiple framework support: The package includes code for the <ProductTable /> component written for Svelte and React meaning you’ll get two different implementation with this product, so you can use it with different tech stacks.
• Configurable: Fully customize the details you present to your visitors with the help of props. Set every aspect of your table:

// Import the relevant component
import { ProductTable } from '@components/ProductTable.tsx'
import ProductTable from '@components/ProductTable.svelte'

// Calling the component with possible options on your page
<ProductTable
    productsPerPage={5}
    defaultSort="name"
    products={[{
        id: 1,
        name: 'Product Name',
        category: 'PDF',
        rating: 4,
        price: 2
        sales: 1200,
        lastUpdated: '2024/01/07',
        status: 'active'
    }, { ... }]}

    // You can also optionally translate your component
    translations={{
        numberOfProducts: 'Number of products:',
        totalRevenue: 'Total revenue:',
        newProduct: 'New Product',
        bulkUpdate: 'Bulk Update',
        export: 'Export',
        name: 'Name',
        category: 'Category',
        rating: 'Rating',
        sales: 'Sales',
        revenue: 'Revenue',
        lastUpdated: 'Last updated',
        status: 'Status',
        active: 'ACTIVE',
        inactive: 'INACTIVE',
        draft: 'DRAFT',
        productsPerPage: 'Products per page:'
    }}
/>

Functionality

This application comes with the following functionalities:

• CRUD operations: Create, read, update, and delete your data associated with your products from this table.
• Bulk edit: Select multiple products to bulk edit their properties with a single action.
• Export: Export your data into a JSON file using the “Export” button.
• Sort and filter: Sort and filter your resultset based on any of the visible columns. Columns can be sorted by clicking on headers.
• Configurable pagination: The table comes with a configurable pagination. Set the number of visible items on a page to customize your table. User-settings are saved into Local Storage.

Code Quality

Apart from the above-mentioned functionalities, the component was written with code quality in mind, meaning it’s:

• Easy to style: Styles can be configured via Sass variables through the stylesheet provided with the component. Three different preconfigured themes are also provided with the stylesheets, including light and dark themes.
• Responsive: The layout is fully responsive that adapts perfectly for all device resolutions like mobiles, tablets and desktops.
• Cross-browser supported: The application was tested on major browsers (Chrome, Firefox, Edge) to ensure cross-browser compatibility.