Skip to content

Commit

Permalink
update home page
Browse files Browse the repository at this point in the history
  • Loading branch information
@KevinVandy
KevinVandy committed Sep 26, 2023
1 parent 98d5575 commit 001e0a1
Show file tree
Hide file tree
Showing 3 changed files with 224 additions and 65 deletions.
16 changes: 16 additions & 0 deletions apps/material-react-table-docs/components/mdx/AnchorLink.tsx
View file
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>
);
};
255 changes: 204 additions & 51 deletions apps/material-react-table-docs/components/mdx/HomeCards.tsx
View file
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&apos;s Extensive API With Material UI&apos;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>&lt;MaterialReactTable /&gt;</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
&quot;lego blocks&quot; 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&nbsp;30&nbsp;Locales
</AnchorLink>{' '}
for everyone to import and use.
</Typography>
</Card>
))}
</Stack>
</Stack>
</Box>
);
};
18 changes: 4 additions & 14 deletions apps/material-react-table-docs/pages/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import Link from 'next/link';
import Image from 'next/image';
import {
alpha,
Box,
Expand All @@ -23,7 +22,7 @@ import { InstallCommand } from '../components/mdx/InstallCommand';
const HomePage = () => {
return (
<>
<Stack sx={{ maxWidth: '100ch', m: 'auto' }}>
<Stack sx={{ maxWidth: '1200px', m: 'auto' }}>
<Typography
sx={{
textAlign: 'center',
Expand Down Expand Up @@ -69,7 +68,7 @@ const HomePage = () => {
},
}}
>
V1
V2
</Box>
</Box>
</Typography>
Expand Down Expand Up @@ -97,7 +96,7 @@ const HomePage = () => {
},
})}
>
V2.0 Coming Soon (July 2023)
V2.0 Still in Alpha, but now installable!
</MuiLink>
</Link>
👀
Expand Down Expand Up @@ -147,19 +146,10 @@ const HomePage = () => {
</MuiLink>
</Link>
</Typography>
<Box sx={{ display: 'flex', justifyContent: 'center', m: '2rem auto' }}>
<Image
alt="Mui + React Table"
src={`/banner.png`}
height={72}
width={304}
/>
</Box>
<StatBadges />
<Box
sx={{
m: '3rem auto',
mb: '1rem',
m: '1rem auto',
display: 'grid',
gap: '1.5rem',
width: '100%',
Expand Down

0 comments on commit 001e0a1

Please sign in to comment.