-
-
Notifications
You must be signed in to change notification settings - Fork 69
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #623 from icflorescu/next
Implement DnD support, update deps, changelog, bump version
- Loading branch information
Showing
22 changed files
with
9,900 additions
and
713 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,84 @@ | ||
| 'use client'; | ||
|
|
||
| import { DragDropContext, Draggable, type DropResult, Droppable } from '@hello-pangea/dnd'; | ||
| import { TableTd } from '@mantine/core'; | ||
| import { notifications } from '@mantine/notifications'; | ||
| import { IconGripVertical } from '@tabler/icons-react'; | ||
| import { DataTable, DataTableColumn, DataTableDraggableRow } from '__PACKAGE__'; | ||
| import { useState } from 'react'; | ||
| import companies from '~/data/companies.json'; | ||
|
|
||
| interface RecordData { | ||
| id: string; | ||
| name: string; | ||
| streetAddress: string; | ||
| city: string; | ||
| state: string; | ||
| missionStatement: string; | ||
| } | ||
|
|
||
| export function RowDraggingExample() { | ||
| const [records, setRecords] = useState<RecordData[]>(companies); | ||
|
|
||
| const handleDragEnd = (result: DropResult) => { | ||
| if (!result.destination) return; | ||
|
|
||
| const items = Array.from(records); | ||
| const sourceIndex = result.source.index; | ||
| const destinationIndex = result.destination.index; | ||
| const [reorderedItem] = items.splice(sourceIndex, 1); | ||
| items.splice(destinationIndex, 0, reorderedItem); | ||
|
|
||
| setRecords(items); | ||
| notifications.show({ | ||
| title: 'Table reordered', | ||
| message: `The company named "${items[sourceIndex].name}" has been moved from position ${sourceIndex + 1} to ${destinationIndex + 1}.`, | ||
| color: 'blue', | ||
| }); | ||
| }; | ||
|
|
||
| const columns: DataTableColumn<RecordData>[] = [ | ||
| // add empty header column for the drag handle | ||
| { accessor: '', hiddenContent: true, width: 30 }, | ||
| { accessor: 'name', width: 150 }, | ||
| { accessor: 'streetAddress', width: 150 }, | ||
| { accessor: 'city', width: 150 }, | ||
| { accessor: 'state', width: 150 }, | ||
| ]; | ||
|
|
||
| return ( | ||
| <DragDropContext onDragEnd={handleDragEnd}> | ||
| <DataTable<RecordData> | ||
| columns={columns} | ||
| records={records} | ||
| height={400} | ||
| withTableBorder | ||
| withColumnBorders | ||
| tableWrapper={({ children }) => ( | ||
| <Droppable droppableId="datatable"> | ||
| {(provided) => ( | ||
| <div {...provided.droppableProps} ref={provided.innerRef}> | ||
| {children} | ||
| {provided.placeholder} | ||
| </div> | ||
| )} | ||
| </Droppable> | ||
| )} | ||
| styles={{ table: { tableLayout: 'fixed' } }} | ||
| rowFactory={({ record, index, rowProps, children }) => ( | ||
| <Draggable key={record.id} draggableId={record.id} index={index}> | ||
| {(provided, snapshot) => ( | ||
| <DataTableDraggableRow isDragging={snapshot.isDragging} {...rowProps} {...provided.draggableProps}> | ||
| {/** custom drag handle */} | ||
| <TableTd {...provided.dragHandleProps} ref={provided.innerRef}> | ||
| <IconGripVertical size={16} /> | ||
| </TableTd> | ||
| {children} | ||
| </DataTableDraggableRow> | ||
| )} | ||
| </Draggable> | ||
| )} | ||
| /> | ||
| </DragDropContext> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| import { Code } from '@mantine/core'; | ||
| import type { Route } from 'next'; | ||
| import { PRODUCT_NAME, REPO_LINK } from '~/app/config'; | ||
| import { CodeBlock } from '~/components/CodeBlock'; | ||
| import { ExternalLink } from '~/components/ExternalLink'; | ||
| import { PageNavigation } from '~/components/PageNavigation'; | ||
| import { PageTitle } from '~/components/PageTitle'; | ||
| import { Txt } from '~/components/Txt'; | ||
| import { readCodeFile } from '~/lib/code'; | ||
| import { allPromiseProps, getRouteMetadata } from '~/lib/utils'; | ||
| import { RowDraggingExample } from './RowDraggingExample'; | ||
|
|
||
| const PATH: Route = '/examples/row-dragging'; | ||
|
|
||
| export const metadata = getRouteMetadata(PATH); | ||
|
|
||
| export default async function BasicUsageExamplePage() { | ||
| const code = await allPromiseProps({ | ||
| 'RowDraggingExample.tsx': readCodeFile<string>(`${PATH}/RowDraggingExample.tsx`), | ||
| 'companies.json': readCodeFile<string>('/../data/companies.json'), | ||
| }); | ||
|
|
||
| return ( | ||
| <> | ||
| <PageTitle of={PATH} /> | ||
| <Txt> | ||
| Starting with <Code>v7.11.3</Code>, {PRODUCT_NAME} also supports row dragging (implemented with{' '} | ||
| <ExternalLink to="https://github.com/hello-pangea/dnd">@hello-pangea/dnd library</ExternalLink> in{' '} | ||
| <ExternalLink to={`${REPO_LINK}/pull/616`}>this PR</ExternalLink>). | ||
| <br /> | ||
| Here is how you would implement it in your project: | ||
| </Txt> | ||
| <CodeBlock tabs={{ code, keys: ['RowDraggingExample.tsx', 'companies.json'] }} /> | ||
| <Txt>The code above will produce the following result:</Txt> | ||
| <RowDraggingExample /> | ||
|
|
||
| <PageNavigation of={PATH} /> | ||
| </> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.