Skip to content
This repository was archived by the owner on Nov 16, 2022. It is now read-only.

Commit 28855b5

Browse files
DanilAndreevDanilAndreev
committed
[Tables Demo] Added Tables demo page.
1 parent 1a59f6a commit 28855b5

File tree

5 files changed

+207
-0
lines changed

5 files changed

+207
-0
lines changed

‎src/examples/Tables/SimpleTable.js

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
/*
2+
* Author: Andrieiev Danil | [email protected] | https://github.com/DanilAndreev
3+
* Copyright (C) 2020.
4+
*/
5+
6+
import React from "react";
7+
import Table from "@material-docs/core/components/Table";
8+
import TableHead from "@material-docs/core/components/TableHead";
9+
import TableBody from "@material-docs/core/components/TableBody";
10+
import TableRow from "@material-docs/core/components/TableRow";
11+
import TableCell from "@material-docs/core/components/TableCell";
12+
13+
export default function SimpleTable() {
14+
return (
15+
<Table>
16+
<TableHead>
17+
<TableRow>
18+
<TableCell>English</TableCell>
19+
<TableCell>Russian</TableCell>
20+
</TableRow>
21+
</TableHead>
22+
<TableBody>
23+
<TableRow>
24+
<TableCell>Hello darkness my old friend</TableCell>
25+
<TableCell>Привет, тьма, моя старая подруга</TableCell>
26+
</TableRow>
27+
<TableRow>
28+
<TableCell>I`ve come to talk with you again</TableCell>
29+
<TableCell>Я пришел снова побеседовать с тобой</TableCell>
30+
</TableRow>
31+
</TableBody>
32+
</Table>
33+
);
34+
}

‎src/examples/Tables/TableWithMarkdown.js

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
/*
2+
* Author: Andrieiev Danil | [email protected] | https://github.com/DanilAndreev
3+
* Copyright (C) 2020.
4+
*/
5+
6+
import React from "react";
7+
import Table from "@material-docs/core/components/Table";
8+
import TableHead from "@material-docs/core/components/TableHead";
9+
import TableBody from "@material-docs/core/components/TableBody";
10+
import TableRow from "@material-docs/core/components/TableRow";
11+
import TableCell from "@material-docs/core/components/TableCell";
12+
import Markdown from "@material-docs/core/components/Markdown";
13+
14+
export default function SimpleTable() {
15+
return (
16+
<Table>
17+
<TableHead>
18+
<TableRow>
19+
<TableCell>English</TableCell>
20+
<TableCell>Russian</TableCell>
21+
</TableRow>
22+
</TableHead>
23+
<TableBody>
24+
<TableRow>
25+
<TableCell>
26+
<Markdown inline typographyInheritSize>
27+
Hello __darkness__ my old _friend_
28+
</Markdown>
29+
</TableCell>
30+
<TableCell>
31+
<Markdown inline typographyInheritSize>
32+
Привет, __тьма__, моя старая _подруга_
33+
</Markdown>
34+
</TableCell>
35+
</TableRow>
36+
<TableRow>
37+
<TableCell>
38+
<Markdown inline typographyInheritSize>
39+
I`ve come ___to talk___ with you again
40+
</Markdown>
41+
</TableCell>
42+
<TableCell>
43+
<Markdown inline typographyInheritSize>
44+
Я пришел снова ___побеседовать___ с тобой
45+
</Markdown>
46+
</TableCell>
47+
</TableRow>
48+
</TableBody>
49+
</Table>
50+
);
51+
}

‎src/examples/Tables/simpleTable.md

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React from "react";
2+
import Table from "@material-docs/core/components/Table";
3+
import TableHead from "@material-docs/core/components/TableHead";
4+
import TableBody from "@material-docs/core/components/TableBody";
5+
import TableRow from "@material-docs/core/components/TableRow";
6+
import TableCell from "@material-docs/core/components/TableCell";
7+
8+
export default function SimpleTable() {
9+
return (
10+
<Table>
11+
<TableHead>
12+
<TableRow>
13+
<TableCell>English</TableCell>
14+
<TableCell>Russian</TableCell>
15+
</TableRow>
16+
</TableHead>
17+
<TableBody>
18+
<TableRow>
19+
<TableCell>Hello darkness my old friend</TableCell>
20+
<TableCell>Привет, тьма, моя старая подруга</TableCell>
21+
</TableRow>
22+
<TableRow>
23+
<TableCell>I`ve come to talk with you again</TableCell>
24+
<TableCell>Я пришел снова побеседовать с тобой</TableCell>
25+
</TableRow>
26+
</TableBody>
27+
</Table>
28+
);
29+
}

‎src/examples/Tables/tableWithMarkdown.md

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import React from "react";
2+
import Table from "@material-docs/core/components/Table";
3+
import TableHead from "@material-docs/core/components/TableHead";
4+
import TableBody from "@material-docs/core/components/TableBody";
5+
import TableRow from "@material-docs/core/components/TableRow";
6+
import TableCell from "@material-docs/core/components/TableCell";
7+
import Markdown from "@material-docs/core/components/Markdown";
8+
9+
export default function SimpleTable() {
10+
return (
11+
<Table>
12+
<TableHead>
13+
<TableRow>
14+
<TableCell>English</TableCell>
15+
<TableCell>Russian</TableCell>
16+
</TableRow>
17+
</TableHead>
18+
<TableBody>
19+
<TableRow>
20+
<TableCell>
21+
<Markdown inline typographyInheritSize>
22+
Hello __darkness__ my old _friend_
23+
</Markdown>
24+
</TableCell>
25+
<TableCell>
26+
<Markdown inline typographyInheritSize>
27+
Привет, __тьма__, моя старая _подруга_
28+
</Markdown>
29+
</TableCell>
30+
</TableRow>
31+
<TableRow>
32+
<TableCell>
33+
<Markdown inline typographyInheritSize>
34+
I`ve come ___to talk___ with you again
35+
</Markdown>
36+
</TableCell>
37+
<TableCell>
38+
<Markdown inline typographyInheritSize>
39+
Я пришел снова ___побеседовать___ с тобой
40+
</Markdown>
41+
</TableCell>
42+
</TableRow>
43+
</TableBody>
44+
</Table>
45+
);
46+
}

‎src/pages/Components/TablesDemo/index.js

+47
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,60 @@
66
import React from "react";
77
import DocsPage from "@material-docs/core/components/DocsPage";
88
import H1 from "@material-docs/core/components/H1";
9+
import Markdown from "@material-docs/core/components/Markdown";
10+
import H3 from "@material-docs/core/components/H3";
11+
import DemoWithCode from "@material-docs/core/components/DemoWithCode";
12+
import SimpleTable from "../../../examples/Tables/SimpleTable";
13+
import simpleTableCode from "../../../examples/Tables/simpleTable.md";
14+
import Box from "@material-ui/core/Box";
15+
import TableWithMarkdown from "../../../examples/Tables/TableWithMarkdown";
16+
import tableWithMarkdownCode from "../../../examples/Tables/tableWithMarkdown.md";
17+
import H2 from "@material-docs/core/components/H2";
18+
import List from "@material-docs/core/components/List";
19+
import ListItem from "@material-docs/core/components/ListItem";
20+
import Link from "@material-docs/core/components/Link";
921

1022
export default function TablesDemo() {
1123
return (
1224
<DocsPage
1325
name={"Tables"}
1426
>
1527
<H1>Tables</H1>
28+
<Markdown></Markdown>
29+
<H3>Simple Table</H3>
30+
<Markdown>Таблицы нужны для демонстрации большого количества структурированных данных.</Markdown>
31+
<DemoWithCode
32+
theme={"darcula"}
33+
code={simpleTableCode}
34+
paperContainer
35+
defaultExpanded
36+
>
37+
<Box p={1}>
38+
<SimpleTable/>
39+
</Box>
40+
</DemoWithCode>
41+
<H3>Tables with markdown</H3>
42+
<Markdown>Для кастомизации таблиц вы можете использовать компонент __Markdown__. Не забудьте выставить пропы ```typographyInheritSize``` и ```inline``` в компоненте __Markdown__</Markdown>
43+
<DemoWithCode
44+
theme={"darcula"}
45+
code={tableWithMarkdownCode}
46+
paperContainer
47+
>
48+
<Box p={1}>
49+
<TableWithMarkdown/>
50+
</Box>
51+
</DemoWithCode>
52+
<H2>Больше информации</H2>
53+
<Markdown>Вы можете узнать больше информации о настройке таблиц [тут]()</Markdown>
54+
<H2>Demos</H2>
55+
<List>
56+
<ListItem><Link page={["Component APIs", "Table"]}>Table</Link></ListItem>
57+
<ListItem><Link page={["Component APIs", "TableHead"]}>TableHead</Link></ListItem>
58+
<ListItem><Link page={["Component APIs", "TableBody"]}>TableBody</Link></ListItem>
59+
<ListItem><Link page={["Component APIs", "TableCell"]}>TableCell</Link></ListItem>
60+
<ListItem><Link page={["Component APIs", "TableRow"]}>TableRow</Link></ListItem>
61+
<ListItem><Link page={["Component APIs", "Markdown"]}>Markdown</Link></ListItem>
62+
</List>
1663
</DocsPage>
1764
);
1865
}

0 commit comments

Comments
 (0)