-
-
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 #486 from icflorescu/next
Release 7.3
- Loading branch information
Showing
34 changed files
with
1,553 additions
and
718 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
34 changes: 34 additions & 0 deletions
34
app/examples/column-dragging-and-toggling/DraggingExample.tsx
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,34 @@ | ||
'use client'; | ||
|
||
import { Button, Group, Stack } from '@mantine/core'; | ||
import { DataTable, useDragToggleColumns } from '__PACKAGE__'; | ||
import { companies, type Company } from '~/data'; | ||
|
||
export default function DraggingExample() { | ||
const key = 'draggable-example'; | ||
|
||
const { effectiveColumns, resetColumnsOrder } = useDragToggleColumns<Company>({ | ||
key, | ||
columns: [ | ||
{ accessor: 'name', width: '40%', draggable: true }, | ||
{ accessor: 'streetAddress', width: '60%', draggable: true }, | ||
{ accessor: 'city', width: 160, draggable: true }, | ||
{ accessor: 'state', textAlign: 'right' }, | ||
], | ||
}); | ||
|
||
return ( | ||
<Stack> | ||
<DataTable | ||
withTableBorder | ||
withColumnBorders | ||
storeColumnsKey={key} | ||
records={companies} | ||
columns={effectiveColumns} | ||
/> | ||
<Group justify="right"> | ||
<Button onClick={resetColumnsOrder}>Reset Column Order</Button> | ||
</Group> | ||
</Stack> | ||
); | ||
} |
62 changes: 62 additions & 0 deletions
62
app/examples/column-dragging-and-toggling/DraggingTogglingComplexExample.tsx
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,62 @@ | ||
'use client'; | ||
|
||
import { IconColumnRemove, IconColumns1 } from '@tabler/icons-react'; | ||
import { DataTable, useDragToggleColumns, type DataTableSortStatus } from '__PACKAGE__'; | ||
import sortBy from 'lodash/sortBy'; | ||
import { useContextMenu } from 'mantine-contextmenu'; | ||
import { useEffect, useState } from 'react'; | ||
import { companies, type Company } from '~/data'; | ||
|
||
export default function DraggingTogglingComplexExample() { | ||
const { showContextMenu } = useContextMenu(); | ||
|
||
const [sortStatus, setSortStatus] = useState<DataTableSortStatus<Company>>({ | ||
columnAccessor: 'name', | ||
direction: 'asc', | ||
}); | ||
|
||
const [records, setRecords] = useState(sortBy(companies, 'name')); | ||
|
||
useEffect(() => { | ||
const data = sortBy(companies, sortStatus.columnAccessor) as Company[]; | ||
setRecords(sortStatus.direction === 'desc' ? data.reverse() : data); | ||
}, [sortStatus]); | ||
|
||
const key = 'toggleable-reset-example'; | ||
|
||
const { effectiveColumns, resetColumnsOrder, resetColumnsToggle } = useDragToggleColumns({ | ||
key, | ||
columns: [ | ||
{ accessor: 'name', width: '40%', toggleable: true, draggable: true, sortable: true }, | ||
{ accessor: 'streetAddress', width: '60%', toggleable: true, draggable: true }, | ||
{ accessor: 'city', width: 160, toggleable: true, draggable: true }, | ||
{ accessor: 'state', textAlign: 'right' }, | ||
], | ||
}); | ||
|
||
return ( | ||
<DataTable | ||
withTableBorder | ||
withColumnBorders | ||
storeColumnsKey={key} | ||
records={records} | ||
columns={effectiveColumns} | ||
sortStatus={sortStatus} | ||
onSortStatusChange={setSortStatus} | ||
onRowContextMenu={({ event }) => | ||
showContextMenu([ | ||
{ | ||
key: 'reset-columns.toggled', | ||
icon: <IconColumnRemove size={16} />, | ||
onClick: resetColumnsToggle, | ||
}, | ||
{ | ||
key: 'reset-columns-order', | ||
icon: <IconColumns1 size={16} />, | ||
onClick: resetColumnsOrder, | ||
}, | ||
])(event) | ||
} | ||
/> | ||
); | ||
} |
46 changes: 46 additions & 0 deletions
46
app/examples/column-dragging-and-toggling/DraggingTogglingResetExample.tsx
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,46 @@ | ||
'use client'; | ||
|
||
import { IconColumnRemove, IconColumns1 } from '@tabler/icons-react'; | ||
import { DataTable, useDragToggleColumns } from '__PACKAGE__'; | ||
import { useContextMenu } from 'mantine-contextmenu'; | ||
import { companies } from '~/data'; | ||
|
||
export default function DraggingTogglingResetExample() { | ||
const { showContextMenu } = useContextMenu(); | ||
|
||
const key = 'toggleable-reset-example'; | ||
|
||
const { effectiveColumns, resetColumnsOrder, resetColumnsToggle } = useDragToggleColumns({ | ||
key, | ||
columns: [ | ||
{ accessor: 'name', width: '40%', toggleable: true, draggable: true }, | ||
{ accessor: 'streetAddress', width: '60%', toggleable: true, draggable: true }, | ||
{ accessor: 'city', width: 160, toggleable: true, draggable: true }, | ||
{ accessor: 'state', textAlign: 'right' }, | ||
], | ||
}); | ||
|
||
return ( | ||
<DataTable | ||
withTableBorder | ||
withColumnBorders | ||
storeColumnsKey={key} | ||
records={companies} | ||
columns={effectiveColumns} | ||
onRowContextMenu={({ event }) => | ||
showContextMenu([ | ||
{ | ||
key: 'reset-columns.toggled', | ||
icon: <IconColumnRemove size={16} />, | ||
onClick: resetColumnsToggle, | ||
}, | ||
{ | ||
key: 'reset-columns-order', | ||
icon: <IconColumns1 size={16} />, | ||
onClick: resetColumnsOrder, | ||
}, | ||
])(event) | ||
} | ||
/> | ||
); | ||
} |
34 changes: 34 additions & 0 deletions
34
app/examples/column-dragging-and-toggling/TogglingExample.tsx
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,34 @@ | ||
'use client'; | ||
|
||
import { Button, Group, Stack } from '@mantine/core'; | ||
import { DataTable, useDragToggleColumns } from '__PACKAGE__'; | ||
import { companies } from '~/data'; | ||
|
||
export default function TogglingExample() { | ||
const key = 'toggleable-example'; | ||
|
||
const { effectiveColumns, resetColumnsToggle } = useDragToggleColumns({ | ||
key, | ||
columns: [ | ||
{ accessor: 'name', width: '40%', toggleable: true }, | ||
{ accessor: 'streetAddress', width: '60%', toggleable: true }, | ||
{ accessor: 'city', width: 160, toggleable: true }, | ||
{ accessor: 'state', textAlign: 'right' }, | ||
], | ||
}); | ||
|
||
return ( | ||
<Stack> | ||
<DataTable | ||
withTableBorder | ||
withColumnBorders | ||
storeColumnsKey={key} | ||
records={companies} | ||
columns={effectiveColumns} | ||
/> | ||
<Group justify="right"> | ||
<Button onClick={resetColumnsToggle}>Reset Column Toggled</Button> | ||
</Group> | ||
</Stack> | ||
); | ||
} |
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,90 @@ | ||
import { Code } from '@mantine/core'; | ||
import type { Route } from 'next'; | ||
import { REPO_LINK } from '~/app/config'; | ||
import { CodeBlock } from '~/components/CodeBlock'; | ||
import { ExternalLink } from '~/components/ExternalLink'; | ||
import { PageNavigation } from '~/components/PageNavigation'; | ||
import { PageSubtitle } from '~/components/PageSubtitle'; | ||
import { PageTitle } from '~/components/PageTitle'; | ||
import { Txt } from '~/components/Txt'; | ||
import { UnorderedList } from '~/components/UnorderedList'; | ||
import { readCodeFile } from '~/lib/code'; | ||
import { allPromiseProps, getRouteMetadata } from '~/lib/utils'; | ||
import DraggingExample from './DraggingExample'; | ||
import DraggingTogglingComplexExample from './DraggingTogglingComplexExample'; | ||
import DraggingTogglingResetExample from './DraggingTogglingResetExample'; | ||
import TogglingExample from './TogglingExample'; | ||
|
||
const PATH: Route = '/examples/column-dragging-and-toggling'; | ||
|
||
export const metadata = getRouteMetadata(PATH); | ||
|
||
export default async function DraggingExamplePage() { | ||
const code = await allPromiseProps({ | ||
'DraggingExample.tsx': readCodeFile<string>(`${PATH}/DraggingExample.tsx`), | ||
'DraggingTogglingResetExample.tsx': readCodeFile<string>(`${PATH}/DraggingTogglingResetExample.tsx`), | ||
'TogglingExample.tsx': readCodeFile<string>(`${PATH}/TogglingExample.tsx`), | ||
'DraggingTogglingComplexExample.tsx': readCodeFile<string>(`${PATH}/DraggingTogglingComplexExample.tsx`), | ||
}); | ||
|
||
return ( | ||
<> | ||
<PageTitle of={PATH} /> | ||
<Txt> | ||
Starting with <Code>v7.3</Code>, Mantine DataTable supports column toggling and drag-and-drop reordering, thanks | ||
to the <ExternalLink to={`${REPO_LINK}/pull/483`}>outstanding work</ExternalLink> of{' '} | ||
<ExternalLink to="https://github.com/gfazioli">Giovambattista Fazioli</ExternalLink>. | ||
</Txt> | ||
<PageSubtitle value="Column drag-and-drop reordering" /> | ||
<DraggingExample /> | ||
<Txt> | ||
In order to enable <strong>column dragging</strong> you’ll have to: | ||
</Txt> | ||
<UnorderedList compact> | ||
<li> | ||
add a <Code>storeColumnsKey: your_key</Code> property to the DataTable (since the order of the columns is | ||
persisted in the local storage); | ||
</li> | ||
<li> | ||
add a <Code>draggable: true</Code> property to each <strong>dragging candidate</strong> column; | ||
</li> | ||
<li> | ||
use <Code>useDragToggleColumns()</Code> hook to get the sorted columns. | ||
</li> | ||
</UnorderedList> | ||
<CodeBlock code={code['DraggingExample.tsx']} /> | ||
<Txt idea> | ||
The default order of the columns is the order in which they are defined in the <Code>columns</Code> prop. | ||
</Txt> | ||
|
||
<PageSubtitle value="Column toggling" /> | ||
<TogglingExample /> | ||
<Txt> | ||
In order to enable <strong>column toggling</strong> you’ll have to: | ||
</Txt> | ||
<UnorderedList compact> | ||
<li> | ||
add a <Code>storeColumnsKey: your_key</Code> property to the DataTable (since the order of the columns is | ||
persisted in the local storage); | ||
</li> | ||
<li> | ||
add a <Code>toggleable: true</Code> property to each <strong>toggling candidate</strong> column; | ||
</li> | ||
<li> | ||
use <Code>useDragToggleColumns()</Code> hook to get the sorted columns. | ||
</li> | ||
</UnorderedList> | ||
<CodeBlock code={code['TogglingExample.tsx']} /> | ||
<Txt idea> | ||
The default toggled columns are the ones with <Code>defaultToggle: true</Code> property. | ||
</Txt> | ||
<PageSubtitle value="Dragging and toggling with context menu reset" /> | ||
<DraggingTogglingResetExample /> | ||
<CodeBlock code={code['DraggingTogglingResetExample.tsx']} /> | ||
<PageSubtitle value="Complex usage" /> | ||
<DraggingTogglingComplexExample /> | ||
<CodeBlock code={code['DraggingTogglingComplexExample.tsx']} /> | ||
<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
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.