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

Commit 6b501a1

Browse files
marekdedicmarekdedic
committed
feat(DataTable): basic DataTable
1 parent b3d7d64 commit 6b501a1

28 files changed

+478
-1
lines changed

‎packages/api-generator/src/DataTable.json

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{
2+
"version": 3,
3+
"name": "DataTable",
4+
"data": [
5+
{
6+
"visibility": "public",
7+
"description": null,
8+
"keywords": [],
9+
"name": "class",
10+
"kind": "const",
11+
"static": false,
12+
"readonly": true,
13+
"type": {
14+
"kind": "type",
15+
"text": "string",
16+
"type": "string"
17+
},
18+
"localName": "klass"
19+
}
20+
],
21+
"computed": [],
22+
"methods": [],
23+
"components": [],
24+
"description": null,
25+
"keywords": [],
26+
"events": [],
27+
"slots": [
28+
{
29+
"name": "default",
30+
"description": null,
31+
"visibility": "public",
32+
"parameters": []
33+
}
34+
],
35+
"refs": []
36+
}

‎packages/api-generator/src/DataTableBody.json

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{
2+
"version": 3,
3+
"name": "DataTableBody",
4+
"data": [
5+
{
6+
"visibility": "public",
7+
"description": null,
8+
"keywords": [],
9+
"name": "class",
10+
"kind": "const",
11+
"static": false,
12+
"readonly": true,
13+
"type": {
14+
"kind": "type",
15+
"text": "string",
16+
"type": "string"
17+
},
18+
"localName": "klass"
19+
}
20+
],
21+
"computed": [],
22+
"methods": [],
23+
"components": [],
24+
"description": null,
25+
"keywords": [],
26+
"events": [],
27+
"slots": [
28+
{
29+
"name": "default",
30+
"description": null,
31+
"visibility": "public",
32+
"parameters": []
33+
}
34+
],
35+
"refs": []
36+
}

‎packages/api-generator/src/DataTableCell.json

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
{
2+
"version": 3,
3+
"name": "DataTableCell",
4+
"data": [
5+
{
6+
"visibility": "public",
7+
"description": null,
8+
"keywords": [],
9+
"name": "class",
10+
"kind": "const",
11+
"static": false,
12+
"readonly": true,
13+
"type": {
14+
"kind": "type",
15+
"text": "string",
16+
"type": "string"
17+
},
18+
"localName": "klass"
19+
},
20+
{
21+
"visibility": "public",
22+
"description": null,
23+
"keywords": [],
24+
"name": "numeric",
25+
"kind": "let",
26+
"static": false,
27+
"readonly": false,
28+
"type": {
29+
"kind": "type",
30+
"text": "boolean",
31+
"type": "boolean"
32+
},
33+
"defaultValue": false
34+
}
35+
],
36+
"computed": [],
37+
"methods": [],
38+
"components": [],
39+
"description": null,
40+
"keywords": [],
41+
"events": [],
42+
"slots": [
43+
{
44+
"name": "default",
45+
"description": null,
46+
"visibility": "public",
47+
"parameters": []
48+
}
49+
],
50+
"refs": []
51+
}

‎packages/api-generator/src/DataTableHead.json

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{
2+
"version": 3,
3+
"name": "DataTableHead",
4+
"data": [
5+
{
6+
"visibility": "public",
7+
"description": null,
8+
"keywords": [],
9+
"name": "class",
10+
"kind": "const",
11+
"static": false,
12+
"readonly": true,
13+
"type": {
14+
"kind": "type",
15+
"text": "string",
16+
"type": "string"
17+
},
18+
"localName": "klass"
19+
}
20+
],
21+
"computed": [],
22+
"methods": [],
23+
"components": [],
24+
"description": null,
25+
"keywords": [],
26+
"events": [],
27+
"slots": [
28+
{
29+
"name": "default",
30+
"description": null,
31+
"visibility": "public",
32+
"parameters": []
33+
}
34+
],
35+
"refs": []
36+
}

‎packages/api-generator/src/DataTableRow.json

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{
2+
"version": 3,
3+
"name": "DataTableRow",
4+
"data": [
5+
{
6+
"visibility": "public",
7+
"description": null,
8+
"keywords": [],
9+
"name": "class",
10+
"kind": "const",
11+
"static": false,
12+
"readonly": true,
13+
"type": {
14+
"kind": "type",
15+
"text": "string",
16+
"type": "string"
17+
},
18+
"localName": "klass"
19+
}
20+
],
21+
"computed": [],
22+
"methods": [],
23+
"components": [],
24+
"description": null,
25+
"keywords": [],
26+
"events": [],
27+
"slots": [
28+
{
29+
"name": "default",
30+
"description": null,
31+
"visibility": "public",
32+
"parameters": []
33+
}
34+
],
35+
"refs": []
36+
}

‎packages/api-generator/src/all.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,11 @@
1515
"CardTitle",
1616
"Checkbox",
1717
"Chip",
18+
"DataTable",
19+
"DataTableBody",
20+
"DataTableCell",
21+
"DataTableHead",
22+
"DataTableRow",
1823
"Dialog",
1924
"Divider",
2025
"ExpansionPanel",

‎packages/api-generator/src/index.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,11 @@ export { default as CardText } from './CardText.json';
1414
export { default as CardTitle } from './CardTitle.json';
1515
export { default as Checkbox } from './Checkbox.json';
1616
export { default as Chip } from './Chip.json';
17+
export { default as DataTable } from './DataTable.json';
18+
export { default as DataTableBody } from './DataTableBody.json';
19+
export { default as DataTableCell } from './DataTableCell.json';
20+
export { default as DataTableHead } from './DataTableHead.json';
21+
export { default as DataTableRow } from './DataTableRow.json';
1722
export { default as Dialog } from './Dialog.json';
1823
export { default as Divider } from './Divider.json';
1924
export { default as ExpansionPanel } from './ExpansionPanel.json';

‎packages/docs/src/examples/DataTable/basic.svelte

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<script>
2+
import {
3+
DataTable,
4+
DataTableHead,
5+
DataTableRow,
6+
DataTableCell,
7+
DataTableBody,
8+
} from 'svelte-materialify/src';
9+
</script>
10+
11+
<DataTable>
12+
<DataTableHead>
13+
<DataTableRow>
14+
<DataTableCell>Dessert</DataTableCell>
15+
<DataTableCell numeric>Carbs (g)</DataTableCell>
16+
<DataTableCell numeric>Protein (g)</DataTableCell>
17+
<DataTableCell>Comments</DataTableCell>
18+
</DataTableRow>
19+
</DataTableHead>
20+
<DataTableBody>
21+
<DataTableRow>
22+
<DataTableCell>Frozen yogurt</DataTableCell>
23+
<DataTableCell numeric>24</DataTableCell>
24+
<DataTableCell numeric>4.0</DataTableCell>
25+
<DataTableCell>Super tasty</DataTableCell>
26+
</DataTableRow>
27+
<DataTableRow>
28+
<DataTableCell>Ice cream sandwich</DataTableCell>
29+
<DataTableCell numeric>37</DataTableCell>
30+
<DataTableCell numeric>4.33333333333</DataTableCell>
31+
<DataTableCell>I like ice cream more</DataTableCell>
32+
</DataTableRow>
33+
<DataTableRow>
34+
<DataTableCell>Eclair</DataTableCell>
35+
<DataTableCell numeric>24</DataTableCell>
36+
<DataTableCell numeric>6.0</DataTableCell>
37+
<DataTableCell>New filing flavor</DataTableCell>
38+
</DataTableRow>
39+
</DataTableBody>
40+
</DataTable>

‎packages/docs/src/routes/components/data-table.md

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
---
2+
title: Data Tables
3+
description: The list component is a continuous group of text, images and icons that may contain primary or supplemental actions.
4+
keywords: data tables, svelte materialify data table component, svelte data table component
5+
related:
6+
- components/list
7+
- components/subheader
8+
---
9+
10+
# DataTable
11+
12+
The `List` component is used to display information. It can contain an avatar, content, actions, subheaders and much more. Lists present content in a way that makes it easy to identify a specific item in a collection. They provide a consistent styling for organizing groups of text and images.
13+
14+
## API
15+
16+
- [DataTable](/api/DataTable/)
17+
- [DataTableHead](/api/DataTableHead/)
18+
- [DataTableBody](/api/DataTableBody/)
19+
- [DataTableRow](/api/DataTableRow/)
20+
- [DataTableCell](/api/DataTableCell/)
21+
22+
## Examples
23+
24+
Below is a collection of simple to complex examples.
25+
26+
### Basic
27+
28+
This is a basic example.
29+
<Components.Example file="DataTable/basic" />
30+
31+
### Disabled
32+
33+
You cannot interact with disabled `List`.
34+
<Components.Example file="List/disabled" />
35+
36+
### Dense
37+
38+
Smol
39+
<Components.Example file="List/dense" />
40+
41+
### Avatar and Icons
42+
43+
We can add avatars and icons to out lists.
44+
<Components.Example file="List/avatar" />
45+
46+
### Nested
47+
48+
Using the `ListGroup` component you can create infinite levels of depth and set custom offsets.
49+
<Components.Example file="List/nested" />
50+
51+
### Subheading and Dividers
52+
53+
Lists can contain multiple subheaders and dividers.
54+
<Components.Example file="List/subheading" />
55+
56+
### Navigation
57+
58+
Lists can receive an alternative `nav` styling that reduces the width `ListItem` takes up as well as adding a border radius.
59+
<Components.Example file="List/navigation" />

‎packages/docs/src/util/routes.js

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,16 @@
11
import { all as API } from 'svelte-materialify-api';
2-
import { mdiSpeedometerMedium, mdiSpeedometer, mdiPaletteOutline, mdiPalette, mdiViewDashboardOutline, mdiViewDashboard, mdiFunction, mdiFunctionVariant, mdiFlaskEmptyOutline, mdiFlaskOutline } from '@mdi/js';
2+
import {
3+
mdiSpeedometerMedium,
4+
mdiSpeedometer,
5+
mdiPaletteOutline,
6+
mdiPalette,
7+
mdiViewDashboardOutline,
8+
mdiViewDashboard,
9+
mdiFunction,
10+
mdiFunctionVariant,
11+
mdiFlaskEmptyOutline,
12+
mdiFlaskOutline,
13+
} from '@mdi/js';
314

415
export default [
516
{
@@ -53,6 +64,7 @@ export default [
5364
{ text: 'Tabs', href: '/components/tabs/' },
5465
{ text: 'Cards', href: '/components/cards/' },
5566
{ text: 'Chips', href: '/components/chips/' },
67+
{ text: 'DataTable', href: '/components/data-table/' },
5668
{ text: 'Dialog', href: '/components/dialog/' },
5769
{ text: 'Dividers', href: '/components/dividers/' },
5870
{ text: 'Grid', href: '/components/grid/' },

0 commit comments

Comments
 (0)