-
-
Notifications
You must be signed in to change notification settings - Fork 389
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'v2' into fix-undefined-filter-type
- Loading branch information
Showing
462 changed files
with
48,992 additions
and
38,601 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -3,7 +3,7 @@ name: Clean PR | |
| on: | ||
| pull_request: | ||
| branches: | ||
| - main | ||
| - v2 | ||
|
|
||
| jobs: | ||
| clean-pr: | ||
|
|
||
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
16 changes: 16 additions & 0 deletions
16
apps/material-react-table-docs/components/mdx/AnchorLink.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 { Link as MuiLink } from '@mui/material'; | ||
| import Link from 'next/link'; | ||
|
|
||
| export const AnchorLink = (props) => { | ||
| return ( | ||
| <Link href={props.href} passHref legacyBehavior> | ||
| <MuiLink | ||
| target={props.href.startsWith('http') ? '_blank' : undefined} | ||
| rel="noopener" | ||
| {...props} | ||
| > | ||
| {props.children} | ||
| </MuiLink> | ||
| </Link> | ||
| ); | ||
| }; |
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
255 changes: 204 additions & 51 deletions
255
apps/material-react-table-docs/components/mdx/HomeCards.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 |
|---|---|---|
| @@ -1,60 +1,213 @@ | ||
| import { alpha, Card, Stack, Typography } from '@mui/material'; | ||
| import { Box, Card, Stack, Typography } from '@mui/material'; | ||
| import Image from 'next/image'; | ||
|
|
||
| const cardData = [ | ||
| { | ||
| text: 'High-quality and performant modern data grid features with a minimal amount of effort', | ||
| image: '/quality.svg', | ||
| alt: 'Quality', | ||
| }, | ||
| { | ||
| text: 'Great defaults, with customization treated as a top priority', | ||
| image: '/customizable.svg', | ||
| alt: 'Customizable', | ||
| }, | ||
| { | ||
| text: 'Easy to opt out of features or UI that you do not need', | ||
| image: '/opt-out.svg', | ||
| alt: 'Easy Opt-out', | ||
| }, | ||
| { | ||
| text: 'Efficient bundle size (47kb minzipped, including dependencies)', | ||
| image: '/efficient.svg', | ||
| alt: 'Efficient', | ||
| }, | ||
| ]; | ||
| import { AnchorLink } from './AnchorLink'; | ||
|
|
||
| export const HomeCards = () => { | ||
| return ( | ||
| <Stack sx={{ mt: '1rem', gap: '1rem' }}> | ||
| {cardData.map((cd, index) => ( | ||
| <Card | ||
| key={index} | ||
| sx={(theme) => ({ | ||
| alignItems: 'center', | ||
| backgroundColor: alpha(theme.palette.primary.main, 0.1), | ||
| display: 'flex', | ||
| gap: '1.5rem', | ||
| p: '1rem', | ||
| })} | ||
| variant="outlined" | ||
| <Box | ||
| sx={{ | ||
| marginTop: '3rem', | ||
| gap: '1rem', | ||
| display: 'grid', | ||
| gridTemplateColumns: '2fr 1fr', | ||
| h3: { | ||
| display: 'flex', | ||
| alignItems: 'center', | ||
| justifyContent: 'center', | ||
| textAlign: 'center', | ||
| marginBottom: '1rem', | ||
| gap: '0.75rem', | ||
| }, | ||
| '@media (max-width: 1024px)': { | ||
| gridTemplateColumns: '1fr', | ||
| }, | ||
| }} | ||
| > | ||
| <Stack sx={{ display: 'grid', gap: '1rem' }}> | ||
| <Box | ||
| sx={{ | ||
| display: 'grid', | ||
| gridTemplateColumns: '1fr 1fr', | ||
| gap: '1rem', | ||
| '@media (max-width: 768px)': { | ||
| gridTemplateColumns: '1fr', | ||
| }, | ||
| }} | ||
| > | ||
| <Card sx={{ p: '1rem' }}> | ||
| <Typography variant="h3">The Best of Both Worlds</Typography> | ||
| <Box | ||
| sx={{ | ||
| display: 'flex', | ||
| justifyContent: 'center', | ||
| margin: '1rem auto', | ||
| }} | ||
| > | ||
| <Image | ||
| alt="Mui + React Table" | ||
| src={`/banner.png`} | ||
| height={60} | ||
| width={256} | ||
| /> | ||
| </Box> | ||
| <Typography> | ||
| Combine TanStack Table's Extensive API With Material | ||
| UI's Awesome Pre-Built Components! | ||
| </Typography> | ||
| </Card> | ||
| <Card sx={{ p: '1rem' }}> | ||
| <Typography variant="h3"> | ||
| <Image | ||
| alt="Efficiency Icon" | ||
| height={24} | ||
| width={24} | ||
| src={'/efficient.svg'} | ||
| />{' '} | ||
| Efficient Bundle Size | ||
| </Typography> | ||
| <Typography>33-47 KB depending on components imported.</Typography> | ||
| <Typography> | ||
| Import the recommended <code>MaterialReactTable</code> component, | ||
| or optionally import lighter weight MRT sub-components that only | ||
| include the UI you need. | ||
| </Typography> | ||
| </Card> | ||
| </Box> | ||
| <Box | ||
| sx={{ | ||
| display: 'grid', | ||
| gridTemplateColumns: '1fr 1fr', | ||
| gap: '1rem', | ||
| '@media (max-width: 768px)': { | ||
| gridTemplateColumns: '1fr', | ||
| }, | ||
| }} | ||
| > | ||
| <Image src={cd.image} alt={cd.text} height={50} width={50} /> | ||
| <Typography | ||
| sx={{ | ||
| fontSize: { | ||
| xs: '0.875rem', | ||
| sm: '1rem', | ||
| md: '1.1rem', | ||
| lg: '1.2rem', | ||
| }, | ||
| fontWeight: 'bold', | ||
| }} | ||
| > | ||
| {cd.text} | ||
| <Card sx={{ p: '1rem' }}> | ||
| <Typography variant="h3"> | ||
| <Image | ||
| alt="Quality Icon" | ||
| height={24} | ||
| width={24} | ||
| src={'/customizable.svg'} | ||
| />{' '} | ||
| Pre-Built or 100% Custom | ||
| </Typography> | ||
| <Typography> | ||
| Use the pre-built single component data grid with the{' '} | ||
| <code><MaterialReactTable /></code> component. | ||
| </Typography> | ||
| <Typography> | ||
| Or build your own markup from scratch using the{' '} | ||
| <code>useMaterialReactTable</code> hook. | ||
| </Typography> | ||
| <Typography> | ||
| All internal MRT components are exported for you to use as | ||
| "lego blocks" to build your own custom tables. | ||
| </Typography> | ||
| </Card> | ||
| <Card sx={{ p: '1rem' }}> | ||
| <Typography variant="h3"> | ||
| <Image | ||
| alt="Customizable Icon" | ||
| height={24} | ||
| width={24} | ||
| src={`/source-code.svg`} | ||
| />{' '} | ||
| Easy Customization | ||
| </Typography> | ||
| <Typography> | ||
| Just about everything is customizable or overridable in Material | ||
| React Table. Pass in custom props or styles to all internal | ||
| components. Use simple <code>enable*</code> props to easily enable | ||
| or disable features. | ||
| </Typography> | ||
| </Card> | ||
| </Box> | ||
| </Stack> | ||
| <Stack sx={{ display: 'grid', gap: '1rem' }}> | ||
| <Card sx={{ p: '1rem' }}> | ||
| <Typography variant="h3"> | ||
| <Image | ||
| alt="Quality Icon" | ||
| height={24} | ||
| width={24} | ||
| src={`/quality.svg`} | ||
| />{' '} | ||
| Powerful Features | ||
| </Typography> | ||
| <Typography> | ||
| Material React Table has most of the features you would expect from | ||
| a modern table library including{' '} | ||
| <AnchorLink href="/docs/guides/pagination">Pagination</AnchorLink>,{' '} | ||
| <AnchorLink href="/docs/guides/sorting">Sorting</AnchorLink>,{' '} | ||
| <AnchorLink href="/docs/guides/column-filtering"> | ||
| Filtering | ||
| </AnchorLink> | ||
| ,{' '} | ||
| <AnchorLink href="/docs/guides/row-selection"> | ||
| Row Selection | ||
| </AnchorLink> | ||
| ,{' '} | ||
| <AnchorLink href="/docs/guides/expanding-sub-rows"> | ||
| Row Expansion | ||
| </AnchorLink> | ||
| ,{' '} | ||
| <AnchorLink href="/docs/guides/column-resizing"> | ||
| Column Resizing | ||
| </AnchorLink> | ||
| ,{' '} | ||
| <AnchorLink href="/docs/guides/column-ordering-dnd"> | ||
| Column Reordering | ||
| </AnchorLink> | ||
| , etc. | ||
| </Typography> | ||
| <Typography> | ||
| However, Material React Table also has advanced features that you | ||
| may not find in other table libraries such as{' '} | ||
| <AnchorLink href="/docs/guides/virtualization"> | ||
| Virtualization | ||
| </AnchorLink> | ||
| ,{' '} | ||
| <AnchorLink href="/docs/guides/aggregation-and-grouping"> | ||
| Aggregation and Grouping | ||
| </AnchorLink> | ||
| ,{' '} | ||
| <AnchorLink href="/docs/examples/advanced"> | ||
| Advanced Filter UIs | ||
| </AnchorLink> | ||
| ,{' '} | ||
| <AnchorLink href="/docs/guides/global-filtering"> | ||
| Fuzzy Search | ||
| </AnchorLink> | ||
| ,{' '} | ||
| <AnchorLink href="/docs/guides/editing"> | ||
| Full Editing (CRUD) | ||
| </AnchorLink> | ||
| ,{' '} | ||
| <AnchorLink href="/docs/guides/column-pinning"> | ||
| Column Pinning | ||
| </AnchorLink> | ||
| ,{' '} | ||
| <AnchorLink href="/docs/guides/row-numbers">Row Numbers</AnchorLink> | ||
| ,{' '} | ||
| <AnchorLink href="/docs/guides/click-to-copy"> | ||
| Click to Copy | ||
| </AnchorLink> | ||
| , and more. | ||
| </Typography> | ||
| </Card> | ||
| <Card sx={{ p: '1rem' }}> | ||
| <Typography variant="h3">30+ i18n Locales</Typography> | ||
| <Typography> | ||
| The MRT Community has contributed{' '} | ||
| <AnchorLink href="/docs/guides/localization"> | ||
| over 30 Locales | ||
| </AnchorLink>{' '} | ||
| for everyone to import and use. | ||
| </Typography> | ||
| </Card> | ||
| ))} | ||
| </Stack> | ||
| </Stack> | ||
| </Box> | ||
| ); | ||
| }; |
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
Oops, something went wrong.