-
-
Notifications
You must be signed in to change notification settings - Fork 152
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: advanced grouping examples (#293)
- Loading branch information
1 parent
0d92431
commit 2ab7649
Showing
18 changed files
with
4,433 additions
and
0 deletions.
There are no files selected for viewing
52 changes: 52 additions & 0 deletions
52
apps/mantine-react-table-docs/example-groups/ExpandingExamples.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,52 @@ | ||
| import { useState } from 'react'; | ||
| import { useRouter } from 'next/router'; | ||
| import { Box, Tabs } from '@mantine/core'; | ||
| import ExampleGrouping from '../examples/enable-column-grouping'; | ||
| import MinimalExample from '../examples/minimal'; | ||
| import AdvancedExample from '../examples/advanced'; | ||
| import AggregationAndGroupingExample from '../examples/aggregation-and-grouping'; | ||
| import CustomHeadlessExample from '../examples/custom-headless'; | ||
|
|
||
| const ExpandingExamples = ({ isPage = false }) => { | ||
| const { pathname, push } = useRouter(); | ||
| const [activeTab, setActiveTab] = useState('column-grouping'); | ||
|
|
||
| return ( | ||
| <Box w={'100%'} mt={1}> | ||
| <Tabs | ||
| value={isPage ? pathname.split('/').pop() : activeTab} | ||
| onChange={(newPath) => | ||
| isPage && newPath !== 'more' | ||
| ? push(newPath as string) | ||
| : setActiveTab(newPath as string) | ||
| } | ||
| keepMounted={false} | ||
| > | ||
| <Tabs.List grow={!isPage}> | ||
| <Tabs.Tab value="column-grouping">Column Grouping</Tabs.Tab> | ||
| <Tabs.Tab value="customized-grouping">Customized Grouping</Tabs.Tab> | ||
| <Tabs.Tab value="aggregation-and-grouping">Aggregation</Tabs.Tab> | ||
| <Tabs.Tab value="detail-panel">Detail Panel</Tabs.Tab> | ||
| <Tabs.Tab value="chart-detail-panel">Chart Detail Panel</Tabs.Tab> | ||
| </Tabs.List> | ||
| <Tabs.Panel value="column-grouping"> | ||
| <ExampleGrouping showTopRow={isPage} /> | ||
| </Tabs.Panel> | ||
| <Tabs.Panel value="customized-grouping"> | ||
| <MinimalExample showTopRow={isPage} /> | ||
| </Tabs.Panel> | ||
| <Tabs.Panel value="detail-panel"> | ||
| <AdvancedExample showTopRow={isPage} /> | ||
| </Tabs.Panel> | ||
| <Tabs.Panel value="detail-panel"> | ||
| <AggregationAndGroupingExample showTopRow={isPage} /> | ||
| </Tabs.Panel> | ||
| <Tabs.Panel value="chart-detail-panel"> | ||
| <CustomHeadlessExample showTopRow={isPage} /> | ||
| </Tabs.Panel> | ||
| </Tabs> | ||
| </Box> | ||
| ); | ||
| }; | ||
|
|
||
| export default ExpandingExamples; |
16 changes: 16 additions & 0 deletions
16
apps/mantine-react-table-docs/examples/enable-column-grouping/index.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,16 @@ | ||
| import { SourceCodeSnippet } from '../../components/mdx/SourceCodeSnippet'; | ||
| import ExampleGrouping from './sandbox/src/TS'; | ||
| const TS = require('!!raw-loader!./sandbox/src/TS.tsx').default; | ||
|
|
||
| const ExampleTable = ({ showTopRow = true }) => { | ||
| return ( | ||
| <SourceCodeSnippet | ||
| Component={ExampleGrouping} | ||
| typeScriptCode={TS} | ||
| tableId="enable-column-grouping" | ||
| showTopRow={showTopRow} | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| export default ExampleTable; |
5 changes: 5 additions & 0 deletions
5
apps/mantine-react-table-docs/examples/enable-column-grouping/sandbox/.gitignore
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,5 @@ | ||
| node_modules | ||
| .DS_Store | ||
| dist | ||
| dist-ssr | ||
| *.local |
6 changes: 6 additions & 0 deletions
6
apps/mantine-react-table-docs/examples/enable-column-grouping/sandbox/README.md
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,6 @@ | ||
| # Example | ||
|
|
||
| To run this example: | ||
|
|
||
| - `npm install` or `yarn` | ||
| - `npm run start` or `yarn start` |
13 changes: 13 additions & 0 deletions
13
apps/mantine-react-table-docs/examples/enable-column-grouping/sandbox/index.html
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,13 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>Mantine React Table Example</title> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div id="root"></div> | ||
| <script type="module" src="/src/main.tsx"></script> | ||
| </body> | ||
| </html> |
Oops, something went wrong.