We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
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
When using unstyled mode (i.e. <PrimeReactProvider value={{ unstyled: true, pt: Tailwind }}>), Table row drag reordering is not functional.
<PrimeReactProvider value={{ unstyled: true, pt: Tailwind }}>
https://stackblitz.com/edit/8fah7c
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
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> ); }
The user can drag & drop rows
The text was updated successfully, but these errors were encountered:
25eea14
Merge pull request #6943 from gcko/bugfix/issue-6942
9153b42
fix: #6942 Fix Datatable Reorderable Rows in Unstyled mode
Successfully merging a pull request may close this issue.
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
Steps to reproduce the behavior
<PrimeReactProvider value={{ unstyled: true, pt: Tailwind }}>
)App.jsx
Expected behavior
The user can drag & drop rows
The text was updated successfully, but these errors were encountered: