Skip to content

Commit

Permalink
[docs] Include code links in the data grid demo (#10219)
Browse files Browse the repository at this point in the history
  • Loading branch information
@cherniavskii
cherniavskii authored Sep 7, 2023
1 parent 640127d commit b958c6d
Show file tree
Hide file tree
Showing 2 changed files with 63 additions and 10 deletions.
36 changes: 31 additions & 5 deletions docs/data/data-grid/demo/PopularFeaturesDemo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ import BasicGroupingDemo from '../column-groups/BasicGroupingDemo';
import EditingWithDatePickers from '../recipes-editing/EditingWithDatePickers';
import CellSelectionGrid from '../cell-selection/CellSelectionRangeStyling';
import AddNewColumnMenuGrid from '../column-menu/AddNewColumnMenuGrid';
import HeaderFiltering from '../filtering/HeaderFilteringDataGridPro';
import HeaderFilteringDataGridPro from '../filtering/HeaderFilteringDataGridPro';
import ClipboardPaste from '../clipboard/ClipboardPaste';

export const featuresSet = [
Expand All @@ -42,6 +42,7 @@ export const featuresSet = [
plan: 'Pro',
detailPage: '/master-detail/',
demo: <BasicDetailPanels />,
linkToCode: '/master-detail/#system-BasicDetailPanels.tsx',
},
{
id: 2,
Expand All @@ -51,6 +52,7 @@ export const featuresSet = [
plan: 'Community',
detailPage: '/editing/',
demo: <EditingWithDatePickers />,
linkToCode: '/recipes-editing/#system-EditingWithDatePickers.tsx',
},
{
id: 3,
Expand All @@ -60,6 +62,7 @@ export const featuresSet = [
detailPage: '/column-groups/',
newBadge: true,
demo: <BasicGroupingDemo />,
linkToCode: '/column-groups/#system-BasicGroupingDemo.tsx',
},
{
id: 4,
Expand All @@ -68,6 +71,7 @@ export const featuresSet = [
plan: 'Pro',
detailPage: '/pagination/',
demo: <LazyLoadingGrid />,
linkToCode: '/row-updates/#system-LazyLoadingGrid.tsx',
},
{
id: 5,
Expand All @@ -77,6 +81,7 @@ export const featuresSet = [
plan: 'Community',
detailPage: '/state/#save-and-restore-the-state',
demo: <RestoreStateInitialState />,
linkToCode: '/state/#system-RestoreStateInitialState.tsx',
},
{
id: 6,
Expand All @@ -85,6 +90,7 @@ export const featuresSet = [
plan: 'Premium',
detailPage: '/row-grouping/',
demo: <RowGroupingInitialState />,
linkToCode: '/row-grouping/#system-RowGroupingInitialState.tsx',
},
{
id: 7,
Expand All @@ -94,6 +100,7 @@ export const featuresSet = [
plan: 'Premium',
detailPage: '/export/#excel-export',
demo: <ExcelExport />,
linkToCode: '/export/#system-ExcelExport.tsx',
},
{
id: 8,
Expand All @@ -102,6 +109,7 @@ export const featuresSet = [
plan: 'Community',
detailPage: '/filtering/quick-filter/',
demo: <QuickFilteringGrid />,
linkToCode: '/filtering/quick-filter/#system-QuickFilteringGrid.tsx',
},
{
id: 9,
Expand All @@ -110,6 +118,7 @@ export const featuresSet = [
plan: 'Pro',
detailPage: '/row-ordering/',
demo: <RowOrderingGrid />,
linkToCode: '/row-ordering/#system-RowOrderingGrid.tsx',
},
{
id: 10,
Expand All @@ -118,6 +127,7 @@ export const featuresSet = [
plan: 'Pro',
detailPage: '/column-pinning/',
demo: <BasicColumnPinning />,
linkToCode: '/column-pinning/#system-BasicColumnPinning.tsx',
},
{
id: 11,
Expand All @@ -126,6 +136,7 @@ export const featuresSet = [
plan: 'Pro',
detailPage: '/row-pinning/',
demo: <RowPinningWithPagination />,
linkToCode: '/row-pinning/#system-RowPinningWithPagination.tsx',
},
{
id: 12,
Expand All @@ -134,6 +145,7 @@ export const featuresSet = [
plan: 'Premium',
detailPage: '/aggregation/',
demo: <AggregationRowGrouping />,
linkToCode: '/aggregation/#system-AggregationRowGrouping.tsx',
},
{
id: 13,
Expand All @@ -143,6 +155,7 @@ export const featuresSet = [
plan: 'Community',
detailPage: '/column-visibility/',
demo: <ColumnSelectorGrid />,
linkToCode: '/column-visibility/#system-ColumnSelectorGrid.tsx',
},
{
id: 14,
Expand All @@ -151,6 +164,7 @@ export const featuresSet = [
plan: 'Community',
detailPage: '/virtualization/#column-virtualization',
demo: <ColumnVirtualizationGrid />,
linkToCode: '/virtualization/#system-ColumnVirtualizationGrid.tsx',
},
{
id: 15,
Expand All @@ -167,6 +181,7 @@ export const featuresSet = [
plan: 'Pro',
detailPage: '/tree-data/',
demo: <TreeDataFullExample />,
linkToCode: '/tree-data/#system-TreeDataFullExample.tsx',
},
{
id: 17,
Expand All @@ -176,6 +191,7 @@ export const featuresSet = [
plan: 'Premium',
detailPage: '/cell-selection/',
demo: <CellSelectionGrid />,
linkToCode: '/cell-selection/#system-CellSelectionGrid.tsx',
newBadge: true,
},
{
Expand All @@ -185,6 +201,7 @@ export const featuresSet = [
plan: 'Community',
detailPage: '/column-menu/',
demo: <AddNewColumnMenuGrid />,
linkToCode: '/column-menu/#system-AddNewColumnMenuGrid.tsx',
newBadge: true,
},
{
Expand All @@ -195,6 +212,7 @@ export const featuresSet = [
plan: 'Premium',
detailPage: '/clipboard/#clipboard-paste',
demo: <ClipboardPaste />,
linkToCode: '/clipboard/#system-ClipboardPaste.tsx',
newBadge: true,
},
{
Expand All @@ -204,7 +222,8 @@ export const featuresSet = [
'Quickly accessible and customizable header filters to filter the data',
plan: 'Pro',
detailPage: '/filtering/#header-filters',
demo: <HeaderFiltering />,
demo: <HeaderFilteringDataGridPro />,
linkToCode: '/filtering/header-filters/#system-HeaderFilteringDataGridPro.tsx',
newBadge: true,
},
];
Expand Down Expand Up @@ -257,9 +276,16 @@ function RowDemo(props) {

return (
<Box sx={{ py: 2, backgroundColor: panelColor }}>
<Box sx={{ width: '90%', margin: 'auto', backgroundColor: gridBgColor }}>
{row.demo}
</Box>
<div style={{ width: '90%', margin: 'auto' }}>
<Box sx={{ backgroundColor: gridBgColor }}>{row.demo}</Box>
{row.linkToCode ? (
<Typography sx={{ marginTop: 1 }} variant="body2">
<Link href={`/x/react-data-grid${row.linkToCode}`} target="_blank">
Open demo source
</Link>
</Typography>
) : null}
</div>
</Box>
);
}
Expand Down
37 changes: 32 additions & 5 deletions docs/data/data-grid/demo/PopularFeaturesDemo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ import BasicGroupingDemo from '../column-groups/BasicGroupingDemo';
import EditingWithDatePickers from '../recipes-editing/EditingWithDatePickers';
import CellSelectionGrid from '../cell-selection/CellSelectionRangeStyling';
import AddNewColumnMenuGrid from '../column-menu/AddNewColumnMenuGrid';
import HeaderFiltering from '../filtering/HeaderFilteringDataGridPro';
import HeaderFilteringDataGridPro from '../filtering/HeaderFilteringDataGridPro';
import ClipboardPaste from '../clipboard/ClipboardPaste';

type Row = {
Expand All @@ -47,6 +47,7 @@ type Row = {
detailPage: string;
demo: React.JSX.Element;
newBadge?: boolean;
linkToCode?: string;
};

export const featuresSet: Row[] = [
Expand All @@ -57,6 +58,7 @@ export const featuresSet: Row[] = [
plan: 'Pro',
detailPage: '/master-detail/',
demo: <BasicDetailPanels />,
linkToCode: '/master-detail/#system-BasicDetailPanels.tsx',
},
{
id: 2,
Expand All @@ -66,6 +68,7 @@ export const featuresSet: Row[] = [
plan: 'Community',
detailPage: '/editing/',
demo: <EditingWithDatePickers />,
linkToCode: '/recipes-editing/#system-EditingWithDatePickers.tsx',
},
{
id: 3,
Expand All @@ -75,6 +78,7 @@ export const featuresSet: Row[] = [
detailPage: '/column-groups/',
newBadge: true,
demo: <BasicGroupingDemo />,
linkToCode: '/column-groups/#system-BasicGroupingDemo.tsx',
},
{
id: 4,
Expand All @@ -83,6 +87,7 @@ export const featuresSet: Row[] = [
plan: 'Pro',
detailPage: '/pagination/',
demo: <LazyLoadingGrid />,
linkToCode: '/row-updates/#system-LazyLoadingGrid.tsx',
},
{
id: 5,
Expand All @@ -92,6 +97,7 @@ export const featuresSet: Row[] = [
plan: 'Community',
detailPage: '/state/#save-and-restore-the-state',
demo: <RestoreStateInitialState />,
linkToCode: '/state/#system-RestoreStateInitialState.tsx',
},
{
id: 6,
Expand All @@ -100,6 +106,7 @@ export const featuresSet: Row[] = [
plan: 'Premium',
detailPage: '/row-grouping/',
demo: <RowGroupingInitialState />,
linkToCode: '/row-grouping/#system-RowGroupingInitialState.tsx',
},
{
id: 7,
Expand All @@ -109,6 +116,7 @@ export const featuresSet: Row[] = [
plan: 'Premium',
detailPage: '/export/#excel-export',
demo: <ExcelExport />,
linkToCode: '/export/#system-ExcelExport.tsx',
},
{
id: 8,
Expand All @@ -117,6 +125,7 @@ export const featuresSet: Row[] = [
plan: 'Community',
detailPage: '/filtering/quick-filter/',
demo: <QuickFilteringGrid />,
linkToCode: '/filtering/quick-filter/#system-QuickFilteringGrid.tsx',
},
{
id: 9,
Expand All @@ -125,6 +134,7 @@ export const featuresSet: Row[] = [
plan: 'Pro',
detailPage: '/row-ordering/',
demo: <RowOrderingGrid />,
linkToCode: '/row-ordering/#system-RowOrderingGrid.tsx',
},
{
id: 10,
Expand All @@ -133,6 +143,7 @@ export const featuresSet: Row[] = [
plan: 'Pro',
detailPage: '/column-pinning/',
demo: <BasicColumnPinning />,
linkToCode: '/column-pinning/#system-BasicColumnPinning.tsx',
},
{
id: 11,
Expand All @@ -141,6 +152,7 @@ export const featuresSet: Row[] = [
plan: 'Pro',
detailPage: '/row-pinning/',
demo: <RowPinningWithPagination />,
linkToCode: '/row-pinning/#system-RowPinningWithPagination.tsx',
},
{
id: 12,
Expand All @@ -149,6 +161,7 @@ export const featuresSet: Row[] = [
plan: 'Premium',
detailPage: '/aggregation/',
demo: <AggregationRowGrouping />,
linkToCode: '/aggregation/#system-AggregationRowGrouping.tsx',
},
{
id: 13,
Expand All @@ -158,6 +171,7 @@ export const featuresSet: Row[] = [
plan: 'Community',
detailPage: '/column-visibility/',
demo: <ColumnSelectorGrid />,
linkToCode: '/column-visibility/#system-ColumnSelectorGrid.tsx',
},
{
id: 14,
Expand All @@ -166,6 +180,7 @@ export const featuresSet: Row[] = [
plan: 'Community',
detailPage: '/virtualization/#column-virtualization',
demo: <ColumnVirtualizationGrid />,
linkToCode: '/virtualization/#system-ColumnVirtualizationGrid.tsx',
},
{
id: 15,
Expand All @@ -182,6 +197,7 @@ export const featuresSet: Row[] = [
plan: 'Pro',
detailPage: '/tree-data/',
demo: <TreeDataFullExample />,
linkToCode: '/tree-data/#system-TreeDataFullExample.tsx',
},
{
id: 17,
Expand All @@ -191,6 +207,7 @@ export const featuresSet: Row[] = [
plan: 'Premium',
detailPage: '/cell-selection/',
demo: <CellSelectionGrid />,
linkToCode: '/cell-selection/#system-CellSelectionGrid.tsx',
newBadge: true,
},
{
Expand All @@ -200,6 +217,7 @@ export const featuresSet: Row[] = [
plan: 'Community',
detailPage: '/column-menu/',
demo: <AddNewColumnMenuGrid />,
linkToCode: '/column-menu/#system-AddNewColumnMenuGrid.tsx',
newBadge: true,
},
{
Expand All @@ -210,6 +228,7 @@ export const featuresSet: Row[] = [
plan: 'Premium',
detailPage: '/clipboard/#clipboard-paste',
demo: <ClipboardPaste />,
linkToCode: '/clipboard/#system-ClipboardPaste.tsx',
newBadge: true,
},
{
Expand All @@ -219,7 +238,8 @@ export const featuresSet: Row[] = [
'Quickly accessible and customizable header filters to filter the data',
plan: 'Pro',
detailPage: '/filtering/#header-filters',
demo: <HeaderFiltering />,
demo: <HeaderFilteringDataGridPro />,
linkToCode: '/filtering/header-filters/#system-HeaderFilteringDataGridPro.tsx',
newBadge: true,
},
];
Expand Down Expand Up @@ -271,9 +291,16 @@ function RowDemo(props: { row: Row }) {

return (
<Box sx={{ py: 2, backgroundColor: panelColor }}>
<Box sx={{ width: '90%', margin: 'auto', backgroundColor: gridBgColor }}>
{row.demo}
</Box>
<div style={{ width: '90%', margin: 'auto' }}>
<Box sx={{ backgroundColor: gridBgColor }}>{row.demo}</Box>
{row.linkToCode ? (
<Typography sx={{ marginTop: 1 }} variant="body2">
<Link href={`/x/react-data-grid${row.linkToCode}`} target="_blank">
Open demo source
</Link>
</Typography>
) : null}
</div>
</Box>
);
}
Expand Down

0 comments on commit b958c6d

Please sign in to comment.