open-index/open-npm huggingface dataset:
npm package: @sliderzz/fleek-data-table
Description: A feature-rich, customizable data table component for React applications.
Latest version: 1.1.0

# React Data Table

A feature-rich, customizable data table component for React applications.

## Installation

```bash
npm install @sliderzz/fleek-data-table
```


## Features

- ✅ Sorting
- ✅ Pagination
- ✅ Selection (single, multiple, checkbox)
- ✅ Column toggling
- ✅ Search functionality
- ✅ Lazy loading support
- ✅ Custom cell rendering
- ✅ Responsive design

## Usage
```tsx
import React, { useState } from 'react';
import { DataTable } from '@sliderzz/fleek-data-table';

const App = () => {
  const [selectedUsers, setSelectedUsers] = useState([]);

  const data = [
    { id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin' },
    { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'User' },
    // More data...
  ];

  const columns = [
    { field: 'id', header: 'ID', sortable: true },
    { field: 'name', header: 'Name', sortable: true }, 
    { field: 'email', header: 'Email' },
    { field: 'role', header: 'Role', sortable: true },
    {
      field: 'actions',
      header: 'Actions',
      body: (rowData) => (
        <button onClick={() => alert(`Edit user ${rowData.name}`)}>Edit</button>
      )
    }
  ];

  return (
    <DataTable
      data={data}
      columns={columns}
      selectionMode="checkbox"
      selection={selectedUsers}
      onSelectionChange={setSelectedUsers}
      paginator
      rows={5}
      totalRecords={data.length}
      columnToggle
    />
  );
};

export default App;
```


## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| data | Array | [] | Array of data to display in the table |
| columns | Array | required | Column definitions |
| loading | boolean | false | Shows loading state |
| paginator | boolean | false | Enables pagination |
| rows | number | 10 | Number of rows per page |
| totalRecords | number | 0 | Total number of records (for pagination) |
| selectionMode | string | null | 'single', 'multiple', or 'checkbox' |
| selection | any | null | Selected row(s) |
| onSelectionChange | function | null | Callback when selection changes |
| onSort | function | null | Callback when sorting changes |
| onPage | function | null | Callback when page changes |
| onSearch | function | null | Callback when search term changes |
| lazy | boolean | false | Enables lazy loading mode |
| emptyMessage | string | 'No records found' | Message to display when no data |
| className | string | null | Additional CSS class |
| style | object | null | Inline styles |
| columnToggle | boolean | false | Enables column toggling |

## Column Properties

| Property | Type | Description |
|----------|------|-------------|
| field | string | Property of the data object |
| header | string | Column header text |
| sortable | boolean | Enables sorting for this column |
| hidden | boolean | Hides the column initially |
| body | function | Custom template for cell content |
| style | object | Inline styles for the column |
| width | string | Column width |


Try it out!!!
npm package: @sliderzz/fleek-multistepform
Description: ## Example Integration
Latest version: 1.0.8

# MultiStepForm Usage Example

## Example Integration

To use the `MultiStepForm` component in your React project, follow this example:

```tsx
import React from "react";
import { MultiStepForm } from "@sliderzz/fleek-multistepform";

const App: React.FC = () => {
    const handleFinalSubmit = () => {
        alert("Form submitted successfully!");
    };

    return (
        <div className="min-h-screen flex items-center justify-center bg-gray-900 p-6">
            <div className="w-full bg-gray-800 p-8 rounded-lg shadow-lg text-white">
                <MultiStepForm onSubmit={handleFinalSubmit} formClassName="space-y-6" stepIndicatorClassName="flex justify-center space-x-3 mb-6" buttonClassName="px-5 py-2 font-medium">
                    {/* Step 1: Personal Details */}
                    <div className="space-y-4 w-[1000px] h-[400px]">
                        <h2 className="text-2xl font-semibold">Step 1: Personal Details</h2>
                        <div className="grid grid-cols-2 gap-4">
                            <input type="text" placeholder="First Name" className="w-full border border-gray-600 p-3 rounded-lg bg-gray-700 text-white placeholder-gray-400 focus:ring focus:ring-blue-500" />
                            <input type="text" placeholder="Last Name" className="w-full border border-gray-600 p-3 rounded-lg bg-gray-700 text-white placeholder-gray-400 focus:ring focus:ring-blue-500" />
                        </div>
                    </div>

                    {/* Step 2: Contact Information */}
                    <div className="space-y-4 w-[1000px] h-[400px]">
                        <h2 className="text-2xl font-semibold">Step 2: Contact Information</h2>
                        <input type="email" placeholder="Email" className="w-full border border-gray-600 p-3 rounded-lg bg-gray-700 text-white placeholder-gray-400 focus:ring focus:ring-blue-500" />
                        <input type="tel" placeholder="Phone Number" className="w-full border border-gray-600 p-3 rounded-lg bg-gray-700 text-white placeholder-gray-400 focus:ring focus:ring-blue-500" />
                    </div>

                    {/* Step 3: Confirmation */}
                    <div className="text-center w-[1000px] h-[400px]">
                        <h2 className="text-2xl font-semibold">Step 3: Confirmation</h2>
                        <p className="text-gray-400 mt-4">Please review your details before submitting.</p>
                    </div>
                </MultiStepForm>
            </div>
        </div>
    );
};

export default App;
npm package: @slideshow/show
Description: main library of show components
Author: Alessandro Candido
Latest version: 0.0.6

<a href="https://github.com/AleCandido/show/tree/main/packages/show"><img alt="Show logo" src="https://raw.githubusercontent.com/AleCandido/show/main/logo.png" width=200 align="right"></a>

# show

[![npm version](https://img.shields.io/npm/v/@slideshow/show.svg)](https://www.npmjs.com/package/@slideshow/show)

Show suite main library, including basic components for a show presentation.