Skip to content

Navigation Menu

Sign in

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit adbc513

Browse filesBrowse files
mrholekmrholek
committed
docs: update content
1 parent 35f844a commit adbc513
Copy full SHA for adbc513

File tree

3 files changed

+121
-3
lines changed
Filter options

3 files changed

+121
-3
lines changed

‎packages/docs/content/components/table/examples/TableExample.tsx

Copy file name to clipboard
+50Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import React from 'react'
2+
import { CTable } from '@coreui/react'
3+
4+
export const TableExample = () => {
5+
const columns = [
6+
{
7+
key: 'id',
8+
label: '#',
9+
_props: { scope: 'col' },
10+
},
11+
{
12+
key: 'class',
13+
_props: { scope: 'col' },
14+
},
15+
{
16+
key: 'heading_1',
17+
label: 'Heading',
18+
_props: { scope: 'col' },
19+
},
20+
{
21+
key: 'heading_2',
22+
label: 'Heading',
23+
_props: { scope: 'col' },
24+
},
25+
]
26+
const items = [
27+
{
28+
id: 1,
29+
class: 'Mark',
30+
heading_1: 'Otto',
31+
heading_2: '@mdo',
32+
_cellProps: { id: { scope: 'row' } },
33+
},
34+
{
35+
id: 2,
36+
class: 'Jacob',
37+
heading_1: 'Thornton',
38+
heading_2: '@fat',
39+
_cellProps: { id: { scope: 'row' } },
40+
},
41+
{
42+
id: 3,
43+
class: 'Larry the Bird',
44+
heading_2: '@twitter',
45+
_cellProps: { id: { scope: 'row' }, class: { colSpan: 2 } },
46+
},
47+
]
48+
49+
return <CTable columns={columns} items={items} />
50+
}

‎packages/docs/content/components/table/examples/TableVariantsExample.tsx

Copy file name to clipboard
+70Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import React from 'react'
2+
import {
3+
CTable,
4+
CTableBody,
5+
CTableDataCell,
6+
CTableHead,
7+
CTableHeaderCell,
8+
CTableRow,
9+
} from '@coreui/react'
10+
11+
export const TableVariantsExample = () => {
12+
return (
13+
<CTable>
14+
<CTableHead>
15+
<CTableRow>
16+
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
17+
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
18+
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
19+
</CTableRow>
20+
</CTableHead>
21+
<CTableBody>
22+
<CTableRow>
23+
<CTableHeaderCell scope="row">Default</CTableHeaderCell>
24+
<CTableDataCell>Cell</CTableDataCell>
25+
<CTableDataCell>Cell</CTableDataCell>
26+
</CTableRow>
27+
<CTableRow color="primary">
28+
<CTableHeaderCell scope="row">Primary</CTableHeaderCell>
29+
<CTableDataCell>Cell</CTableDataCell>
30+
<CTableDataCell>Cell</CTableDataCell>
31+
</CTableRow>
32+
<CTableRow color="secondary">
33+
<CTableHeaderCell scope="row">Secondary</CTableHeaderCell>
34+
<CTableDataCell>Cell</CTableDataCell>
35+
<CTableDataCell>Cell</CTableDataCell>
36+
</CTableRow>
37+
<CTableRow color="success">
38+
<CTableHeaderCell scope="row">Success</CTableHeaderCell>
39+
<CTableDataCell>Cell</CTableDataCell>
40+
<CTableDataCell>Cell</CTableDataCell>
41+
</CTableRow>
42+
<CTableRow color="danger">
43+
<CTableHeaderCell scope="row">Danger</CTableHeaderCell>
44+
<CTableDataCell>Cell</CTableDataCell>
45+
<CTableDataCell>Cell</CTableDataCell>
46+
</CTableRow>
47+
<CTableRow color="warning">
48+
<CTableHeaderCell scope="row">Warning</CTableHeaderCell>
49+
<CTableDataCell>Cell</CTableDataCell>
50+
<CTableDataCell>Cell</CTableDataCell>
51+
</CTableRow>
52+
<CTableRow color="info">
53+
<CTableHeaderCell scope="row">Info</CTableHeaderCell>
54+
<CTableDataCell>Cell</CTableDataCell>
55+
<CTableDataCell>Cell</CTableDataCell>
56+
</CTableRow>
57+
<CTableRow color="light">
58+
<CTableHeaderCell scope="row">Light</CTableHeaderCell>
59+
<CTableDataCell>Cell</CTableDataCell>
60+
<CTableDataCell>Cell</CTableDataCell>
61+
</CTableRow>
62+
<CTableRow color="dark">
63+
<CTableHeaderCell scope="row">Dark</CTableHeaderCell>
64+
<CTableDataCell>Cell</CTableDataCell>
65+
<CTableDataCell>Cell</CTableDataCell>
66+
</CTableRow>
67+
</CTableBody>
68+
</CTable>
69+
)
70+
}

‎packages/docs/content/components/table/index.mdx

Copy file name to clipboardExpand all lines: packages/docs/content/components/table/index.mdx
+1-3Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -71,9 +71,7 @@ export const TableExample = (props) => {
7171
return <CTable columns={columns} items={items} {...props} />
7272
}
7373

74-
<Example className="rounded">
75-
<TableExample />
76-
</Example>
74+
<ExampleSnippet component="TableExample" componentName="React Table" />
7775

7876
In version **4.3.0** we introduced a new way to create a table, similarly to our [Smart Table component](https://coreui.io/react/docs/components/smart-table/).
7977

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.