Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Datatable: Reorderable Rows does not work in Unstyled Mode #6942

Closed
gcko opened this issue Jul 29, 2024 · 0 comments · Fixed by leoo1992/GeradorQRCode#80 or leoo1992/GeradorQRCode#85 · May be fixed by mtech-31-quemistry/quemistry_client_web#20
Labels
Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible

Comments

@gcko
Copy link
Contributor

gcko commented Jul 29, 2024

Describe the bug

When using unstyled mode (i.e. <PrimeReactProvider value={{ unstyled: true, pt: Tailwind }}>), Table row drag reordering is not functional.

Reproducer

https://stackblitz.com/edit/8fah7c

System Information

 System:
    OS: macOS 14.5
    CPU: (10) arm64 Apple M1 Max
    Memory: 10.62 GB / 64.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 22.5.1 - ~/.nave/installed/22.5.1/bin/node
    npm: 10.8.2 - ~/.nave/installed/22.5.1/bin/npm
    pnpm: 9.6.0 - /usr/local/bin/pnpm
    bun: 1.1.18 - /opt/homebrew/bin/bun
  Browsers:
    Chrome: 128.0.6613.5
    Edge: 120.0.2210.144
    Safari: 17.5
  npmPackages:
    primereact: ^10.7.0 => 10.7.0 
    react: 18.3.1 => 18.3.1 

Steps to reproduce the behavior

  1. Enable unstyled mode (<PrimeReactProvider value={{ unstyled: true, pt: Tailwind }}>)
  2. Create the following in App.jsx
import React, { useState, useEffect, useRef } from 'react';
import { DataTable } from 'primereact/datatable';
import { Column } from 'primereact/column';
import { ProductService } from './service/ProductService';

export default function ReorderDemo() {
    const [products, setProducts] = useState([]);
    const columns = [
        { field: 'code', header: 'Code' },
        { field: 'name', header: 'Name' },
        { field: 'category', header: 'Category' },
        { field: 'quantity', header: 'Quantity' }
    ];

    useEffect(() => {
        ProductService.getProductsMini().then((data) => setProducts(data));
    }, []);

    const dynamicColumns = columns.map((col, i) => {
        return <Column key={col.field} columnKey={col.field} field={col.field} header={col.header} />;
    });

    return (
        <div className="card">
            <DataTable value={products} reorderableColumns reorderableRows onRowReorder={(e) => setProducts(e.value)} tableStyle={{ minWidth: '50rem' }}>
                <Column rowReorder style={{ width: '3rem' }} />
                {dynamicColumns}
            </DataTable>
        </div>
    );
}
  1. When you run the application, note you can not drag / drop the rows

Expected behavior

The user can drag & drop rows

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible
Projects
None yet
1 participant