Expandable Tables for React, Svelte, and Astro

Easily integrate expandable tables into your React, Svelte, or Astro application. This package includes fully coded components for three different technologies, with light and dark themes. The component is easily configurable through the following props:

<ExpandableTable
    headings={['ID', 'Name', 'Email']}
    numberOfVisibleRows={3}
    expandButtonLabel="Expand"
    collapseButtonLabel="Collapse"
    data={[
        ['#1', 'John Doe', '[email protected]'],
        ['#2', 'Jane Smith', '[email protected]'],
        ['#3', 'Bob Johnson', '[email protected]'],
        ['#4', 'Emily Davis', '[email protected]'],
        ['#5', 'William Brown', '[email protected]']
    ]}
/>

Preview the component to see how the table and expand/collapse functionality works. This product comes with the following features:

• Multiple framework support: The package includes code for the <ExpandableTable /> component written in React, Svelte, and Astro meaning you’ll get three different implementation with this product, so you can use it with different tech stacks.
• Configurable: Customize the appearance of your tables through props. Set your headings, data, and button labels, as well as the initial number of visible rows.
• Easy to style: Styles can be configured via Sass variables through the stylesheet provided with the component.
  • Light & dark themes: Inside the stylesheet, configurations for dark/light themes are also included.
• Responsive: The layout is fully responsive that adapts perfectly for all device resolutions like mobiles, tablets and desktops.
• Cross-browser support: The component was tested on major browsers (Chrome, Firefox, and Edge) to ensure cross-browser compatibility.