feat(DataTable): basic DataTable

TheComputerM · Apr 7, 2021 · 6b501a1 · 6b501a1
1 parent b3d7d64
commit 6b501a1
Show file tree

Hide file tree

Showing 28 changed files with 478 additions and 1 deletion.
diff --git a/packages/api-generator/src/DataTable.json b/packages/api-generator/src/DataTable.json
@@ -0,0 +1,36 @@
+{
+  "version": 3,
+  "name": "DataTable",
+  "data": [
+    {
+      "visibility": "public",
+      "description": null,
+      "keywords": [],
+      "name": "class",
+      "kind": "const",
+      "static": false,
+      "readonly": true,
+      "type": {
+        "kind": "type",
+        "text": "string",
+        "type": "string"
+      },
+      "localName": "klass"
+    }
+  ],
+  "computed": [],
+  "methods": [],
+  "components": [],
+  "description": null,
+  "keywords": [],
+  "events": [],
+  "slots": [
+    {
+      "name": "default",
+      "description": null,
+      "visibility": "public",
+      "parameters": []
+    }
+  ],
+  "refs": []
+}
diff --git a/packages/api-generator/src/DataTableBody.json b/packages/api-generator/src/DataTableBody.json
@@ -0,0 +1,36 @@
+{
+  "version": 3,
+  "name": "DataTableBody",
+  "data": [
+    {
+      "visibility": "public",
+      "description": null,
+      "keywords": [],
+      "name": "class",
+      "kind": "const",
+      "static": false,
+      "readonly": true,
+      "type": {
+        "kind": "type",
+        "text": "string",
+        "type": "string"
+      },
+      "localName": "klass"
+    }
+  ],
+  "computed": [],
+  "methods": [],
+  "components": [],
+  "description": null,
+  "keywords": [],
+  "events": [],
+  "slots": [
+    {
+      "name": "default",
+      "description": null,
+      "visibility": "public",
+      "parameters": []
+    }
+  ],
+  "refs": []
+}
diff --git a/packages/api-generator/src/DataTableCell.json b/packages/api-generator/src/DataTableCell.json
@@ -0,0 +1,51 @@
+{
+  "version": 3,
+  "name": "DataTableCell",
+  "data": [
+    {
+      "visibility": "public",
+      "description": null,
+      "keywords": [],
+      "name": "class",
+      "kind": "const",
+      "static": false,
+      "readonly": true,
+      "type": {
+        "kind": "type",
+        "text": "string",
+        "type": "string"
+      },
+      "localName": "klass"
+    },
+    {
+      "visibility": "public",
+      "description": null,
+      "keywords": [],
+      "name": "numeric",
+      "kind": "let",
+      "static": false,
+      "readonly": false,
+      "type": {
+        "kind": "type",
+        "text": "boolean",
+        "type": "boolean"
+      },
+      "defaultValue": false
+    }
+  ],
+  "computed": [],
+  "methods": [],
+  "components": [],
+  "description": null,
+  "keywords": [],
+  "events": [],
+  "slots": [
+    {
+      "name": "default",
+      "description": null,
+      "visibility": "public",
+      "parameters": []
+    }
+  ],
+  "refs": []
+}
diff --git a/packages/api-generator/src/DataTableHead.json b/packages/api-generator/src/DataTableHead.json
@@ -0,0 +1,36 @@
+{
+  "version": 3,
+  "name": "DataTableHead",
+  "data": [
+    {
+      "visibility": "public",
+      "description": null,
+      "keywords": [],
+      "name": "class",
+      "kind": "const",
+      "static": false,
+      "readonly": true,
+      "type": {
+        "kind": "type",
+        "text": "string",
+        "type": "string"
+      },
+      "localName": "klass"
+    }
+  ],
+  "computed": [],
+  "methods": [],
+  "components": [],
+  "description": null,
+  "keywords": [],
+  "events": [],
+  "slots": [
+    {
+      "name": "default",
+      "description": null,
+      "visibility": "public",
+      "parameters": []
+    }
+  ],
+  "refs": []
+}
diff --git a/packages/api-generator/src/DataTableRow.json b/packages/api-generator/src/DataTableRow.json
@@ -0,0 +1,36 @@
+{
+  "version": 3,
+  "name": "DataTableRow",
+  "data": [
+    {
+      "visibility": "public",
+      "description": null,
+      "keywords": [],
+      "name": "class",
+      "kind": "const",
+      "static": false,
+      "readonly": true,
+      "type": {
+        "kind": "type",
+        "text": "string",
+        "type": "string"
+      },
+      "localName": "klass"
+    }
+  ],
+  "computed": [],
+  "methods": [],
+  "components": [],
+  "description": null,
+  "keywords": [],
+  "events": [],
+  "slots": [
+    {
+      "name": "default",
+      "description": null,
+      "visibility": "public",
+      "parameters": []
+    }
+  ],
+  "refs": []
+}
diff --git a/packages/api-generator/src/all.json b/packages/api-generator/src/all.json
@@ -15,6 +15,11 @@
     "CardTitle",
     "Checkbox",
     "Chip",
+    "DataTable",
+    "DataTableBody",
+    "DataTableCell",
+    "DataTableHead",
+    "DataTableRow",
     "Dialog",
     "Divider",
     "ExpansionPanel",

diff --git a/packages/api-generator/src/index.js b/packages/api-generator/src/index.js
@@ -14,6 +14,11 @@ export { default as CardText } from './CardText.json';
 export { default as CardTitle } from './CardTitle.json';
 export { default as Checkbox } from './Checkbox.json';
 export { default as Chip } from './Chip.json';
+export { default as DataTable } from './DataTable.json';
+export { default as DataTableBody } from './DataTableBody.json';
+export { default as DataTableCell } from './DataTableCell.json';
+export { default as DataTableHead } from './DataTableHead.json';
+export { default as DataTableRow } from './DataTableRow.json';
 export { default as Dialog } from './Dialog.json';
 export { default as Divider } from './Divider.json';
 export { default as ExpansionPanel } from './ExpansionPanel.json';

diff --git a/packages/docs/src/examples/DataTable/basic.svelte b/packages/docs/src/examples/DataTable/basic.svelte
@@ -0,0 +1,40 @@
+<script>
+  import {
+    DataTable,
+    DataTableHead,
+    DataTableRow,
+    DataTableCell,
+    DataTableBody,
+  } from 'svelte-materialify/src';
+</script>
+
+<DataTable>
+  <DataTableHead>
+    <DataTableRow>
+      <DataTableCell>Dessert</DataTableCell>
+      <DataTableCell numeric>Carbs (g)</DataTableCell>
+      <DataTableCell numeric>Protein (g)</DataTableCell>
+      <DataTableCell>Comments</DataTableCell>
+    </DataTableRow>
+  </DataTableHead>
+  <DataTableBody>
+    <DataTableRow>
+      <DataTableCell>Frozen yogurt</DataTableCell>
+      <DataTableCell numeric>24</DataTableCell>
+      <DataTableCell numeric>4.0</DataTableCell>
+      <DataTableCell>Super tasty</DataTableCell>
+    </DataTableRow>
+    <DataTableRow>
+      <DataTableCell>Ice cream sandwich</DataTableCell>
+      <DataTableCell numeric>37</DataTableCell>
+      <DataTableCell numeric>4.33333333333</DataTableCell>
+      <DataTableCell>I like ice cream more</DataTableCell>
+    </DataTableRow>
+    <DataTableRow>
+      <DataTableCell>Eclair</DataTableCell>
+      <DataTableCell numeric>24</DataTableCell>
+      <DataTableCell numeric>6.0</DataTableCell>
+      <DataTableCell>New filing flavor</DataTableCell>
+    </DataTableRow>
+  </DataTableBody>
+</DataTable>
diff --git a/packages/docs/src/routes/components/data-table.md b/packages/docs/src/routes/components/data-table.md
@@ -0,0 +1,59 @@
+---
+title: Data Tables
+description: The list component is a continuous group of text, images and icons that may contain primary or supplemental actions.
+keywords: data tables, svelte materialify data table component, svelte data table component
+related:
+  - components/list
+  - components/subheader
+---
+
+# DataTable
+
+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.
+
+## API
+
+- [DataTable](/api/DataTable/)
+- [DataTableHead](/api/DataTableHead/)
+- [DataTableBody](/api/DataTableBody/)
+- [DataTableRow](/api/DataTableRow/)
+- [DataTableCell](/api/DataTableCell/)
+
+## Examples
+
+Below is a collection of simple to complex examples.
+
+### Basic
+
+This is a basic example.
+<Components.Example file="DataTable/basic" />
+
+### Disabled
+
+You cannot interact with disabled `List`.
+<Components.Example file="List/disabled" />
+
+### Dense
+
+Smol
+<Components.Example file="List/dense" />
+
+### Avatar and Icons
+
+We can add avatars and icons to out lists.
+<Components.Example file="List/avatar" />
+
+### Nested
+
+Using the `ListGroup` component you can create infinite levels of depth and set custom offsets.
+<Components.Example file="List/nested" />
+
+### Subheading and Dividers
+
+Lists can contain multiple subheaders and dividers.
+<Components.Example file="List/subheading" />
+
+### Navigation
+
+Lists can receive an alternative `nav` styling that reduces the width `ListItem` takes up as well as adding a border radius.
+<Components.Example file="List/navigation" />
diff --git a/packages/docs/src/util/routes.js b/packages/docs/src/util/routes.js
@@ -1,5 +1,16 @@
 import { all as API } from 'svelte-materialify-api';
-import { mdiSpeedometerMedium, mdiSpeedometer, mdiPaletteOutline, mdiPalette, mdiViewDashboardOutline, mdiViewDashboard, mdiFunction, mdiFunctionVariant, mdiFlaskEmptyOutline, mdiFlaskOutline } from '@mdi/js';
+import {
+  mdiSpeedometerMedium,
+  mdiSpeedometer,
+  mdiPaletteOutline,
+  mdiPalette,
+  mdiViewDashboardOutline,
+  mdiViewDashboard,
+  mdiFunction,
+  mdiFunctionVariant,
+  mdiFlaskEmptyOutline,
+  mdiFlaskOutline,
+} from '@mdi/js';
 
 export default [
   {
@@ -53,6 +64,7 @@ export default [
       { text: 'Tabs', href: '/components/tabs/' },
       { text: 'Cards', href: '/components/cards/' },
       { text: 'Chips', href: '/components/chips/' },
+      { text: 'DataTable', href: '/components/data-table/' },
       { text: 'Dialog', href: '/components/dialog/' },
       { text: 'Dividers', href: '/components/dividers/' },
       { text: 'Grid', href: '/components/grid/' },

diff --git a/packages/svelte-materialify/@types/DataTable.d.ts b/packages/svelte-materialify/@types/DataTable.d.ts
@@ -0,0 +1,7 @@
+import { SvelteComponent } from './shared';
+
+interface DataTableProps {}
+
+declare class DataTable extends SvelteComponent<DataTableProps> {}
+
+export default DataTable;
diff --git a/packages/svelte-materialify/@types/DataTableBody.d.ts b/packages/svelte-materialify/@types/DataTableBody.d.ts
@@ -0,0 +1,7 @@
+import { SvelteComponent } from './shared';
+
+interface DataTableBodyProps {}
+
+declare class DataTableBody extends SvelteComponent<DataTableBodyProps> {}
+
+export default DataTableBody;
diff --git a/packages/svelte-materialify/@types/DataTableCell.d.ts b/packages/svelte-materialify/@types/DataTableCell.d.ts
@@ -0,0 +1,9 @@
+import { SvelteComponent } from './shared';
+
+interface DataTableCellProps {
+  numeric?: boolean;
+}
+
+declare class DataTableCell extends SvelteComponent<DataTableCellProps> {}
+
+export default DataTableCell;
diff --git a/packages/svelte-materialify/@types/DataTableHead.d.ts b/packages/svelte-materialify/@types/DataTableHead.d.ts
@@ -0,0 +1,7 @@
+import { SvelteComponent } from './shared';
+
+interface DataTableHeadProps {}
+
+declare class DataTableHead extends SvelteComponent<DataTableHeadProps> {}
+
+export default DataTableHead;
diff --git a/packages/svelte-materialify/@types/DataTableRow.d.ts b/packages/svelte-materialify/@types/DataTableRow.d.ts
@@ -0,0 +1,7 @@
+import { SvelteComponent } from './shared';
+
+interface DataTableRowProps {}
+
+declare class DataTableRow extends SvelteComponent<DataTableRowProps> {}
+
+export default DataTableRow;