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

#4777: Improving Datatable SelectionChanged event #4780

Closed

Conversation

melloware
Copy link
Member

Fix #4777: Improving Datatable SelectionChanged event

@ulasturann @mertsincan this is what I have so far using Discriminated Unions https://www.typescriptlang.org/docs/handbook/2/narrowing.html#discriminated-unions

This seems to be the TypeScript recommended way and now if you have this...

    const [selectedProduct, setSelectedProduct] = useState<Product>({});
    const [selectedProducts, setSelectedProducts] = useState<Product[]>([]);
    const [selectedCells, setSelectedCells] = useState<DataTableCellSelection<Product[]>>();

In the selection event by checking the type it now knows the correct single, multiple, or cell type event,

<DataTable
                    value={products}
                    selectionMode="single"
                    selection={selectedProduct}
                    onSelectionChange={(e) => {
                        switch (e.type) {
                            case 'single':
                            case 'radio':
                                setSelectedProduct(e.value);
                                break;
                            case 'cell':
                                setSelectedCells(e.value);
                                break;
                            case 'multiple':
                            case 'checkbox':
                            case 'all':
                                setSelectedProducts(e.value);
                                break;
                        }
                    }}
                    dataKey="id"
                    metaKeySelection={metaKey}
                    tableStyle={{ minWidth: '50rem' }}
                >

Its not exactly what the user wants but this is a much better TypeScript way of having multiple possible outcomes.

@vercel
Copy link

vercel bot commented Aug 15, 2023

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Ignored Deployment
Name Status Preview Comments Updated (UTC)
primereact ⬜️ Ignored (Inspect) Visit Preview Aug 15, 2023 8:49pm

@melloware melloware added the Status: Pending Review Issue or pull request is being reviewed by Core Team label Aug 15, 2023
@melloware melloware requested review from ulasturann and mertsincan and removed request for ulasturann August 15, 2023 12:48
@melloware melloware force-pushed the datatable-selection-types branch from a010b1e to 8710ab1 Compare August 15, 2023 20:32
@melloware melloware force-pushed the datatable-selection-types branch from 8710ab1 to 11d36e6 Compare August 15, 2023 20:33
@bu3alwa
Copy link
Contributor

bu3alwa commented Aug 15, 2023

This looks good to me as well. Glad to see this change.

@melloware
Copy link
Member Author

@bu3alwa Thanks for reviewing!

@melloware
Copy link
Member Author

Better PR: #4792

Closing this one

@melloware melloware closed this Aug 16, 2023
@melloware melloware deleted the datatable-selection-types branch August 17, 2023 11:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Status: Pending Review Issue or pull request is being reviewed by Core Team
Projects
None yet
Development

Successfully merging this pull request may close these issues.

DataTable: Type issue for Selection Mode
2 participants