npm - @zywave/zui-table - Versions diffs - 4.0.0-pre.1 - Mend

@zywave/zui-table 4.0.0-pre.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (58) hide show

package/README.md +27 -0
package/demo/index.html +435 -0
package/dist/css/zui-table.fouc.css +1 -0
package/dist/custom-elements.json +405 -0
package/dist/index.d.ts +5 -0
package/dist/index.js +6 -0
package/dist/index.js.map +1 -0
package/dist/zui-table-cell-css.d.ts +1 -0
package/dist/zui-table-cell-css.js +3 -0
package/dist/zui-table-cell-css.js.map +1 -0
package/dist/zui-table-cell.d.ts +21 -0
package/dist/zui-table-cell.js +43 -0
package/dist/zui-table-cell.js.map +1 -0
package/dist/zui-table-css.d.ts +1 -0
package/dist/zui-table-css.js +3 -0
package/dist/zui-table-css.js.map +1 -0
package/dist/zui-table-footer-css.d.ts +1 -0
package/dist/zui-table-footer-css.js +3 -0
package/dist/zui-table-footer-css.js.map +1 -0
package/dist/zui-table-footer.d.ts +17 -0
package/dist/zui-table-footer.js +22 -0
package/dist/zui-table-footer.js.map +1 -0
package/dist/zui-table-row-css.d.ts +1 -0
package/dist/zui-table-row-css.js +3 -0
package/dist/zui-table-row-css.js.map +1 -0
package/dist/zui-table-row.d.ts +31 -0
package/dist/zui-table-row.js +52 -0
package/dist/zui-table-row.js.map +1 -0
package/dist/zui-table-topbar-css.d.ts +1 -0
package/dist/zui-table-topbar-css.js +3 -0
package/dist/zui-table-topbar-css.js.map +1 -0
package/dist/zui-table-topbar.d.ts +17 -0
package/dist/zui-table-topbar.js +24 -0
package/dist/zui-table-topbar.js.map +1 -0
package/dist/zui-table.d.ts +45 -0
package/dist/zui-table.js +96 -0
package/dist/zui-table.js.map +1 -0
package/lab.html +467 -0
package/package.json +37 -0
package/src/css/zui-table.fouc.scss +137 -0
package/src/index.ts +5 -0
package/src/zui-table-cell-css.js +3 -0
package/src/zui-table-cell.scss +5 -0
package/src/zui-table-cell.ts +41 -0
package/src/zui-table-css.js +3 -0
package/src/zui-table-footer-css.js +3 -0
package/src/zui-table-footer.scss +12 -0
package/src/zui-table-footer.ts +30 -0
package/src/zui-table-row-css.js +3 -0
package/src/zui-table-row.scss +25 -0
package/src/zui-table-row.ts +49 -0
package/src/zui-table-topbar-css.js +3 -0
package/src/zui-table-topbar.scss +40 -0
package/src/zui-table-topbar.ts +32 -0
package/src/zui-table.scss +39 -0
package/src/zui-table.ts +93 -0
package/test/zui-table.test.ts +129 -0
package/tsconfig.build.json +10 -0

package/lab.html ADDED Viewed

@@ -0,0 +1,467 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="ZUI Web Component Skeleton" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <meta name="theme-color" content="#fff" />
+    <title>ZuiTable Demo</title>
+    <link rel="stylesheet" href="../../../node_modules/@zywave/zui-app-styles/dist/zui-app-styles.css" />
+    <link rel="stylesheet" href="../../../node_modules/@zywave/zui-base-styles/dist/zui-base-styles.css" />
+    <link rel="stylesheet" href="./dist/css/zui-table.fouc.css" />
+    <link rel="stylesheet" href="../../../node_modules/@zywave/zui-button/dist/css/zui-button.fouc.css" />
+    <link rel="stylesheet" href="../../../node_modules/@zywave/zui-pager/dist/css/zui-pager.fouc.css" />
+    <link rel="stylesheet" href="../../../node_modules/@zywave/zui-search/dist/css/zui-search.fouc.css" />
+    <script src="./dist/index.js" type="module" async></script>
+    <script src="../../../node_modules/@zywave/zui-button/dist/index.js" type="module"></script>
+    <script src="../../../node_modules/@zywave/zui-pager/dist/index.js" type="module"></script>
+    <script src="../../../node_modules/@zywave/zui-search/dist/index.js" type="module"></script>
+    <style>
+      body {
+        padding: 2em;
+      }
+      h2 {
+        margin-top: 4rem;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>zui-table</h1>
+    <h2>Table with 5 columns</h2>
+    <zui-table columns="5">
+      <zui-table-row>
+        <zui-table-cell>Paulus Atreides</zui-table-cell>
+        <zui-table-cell>Old Duke</zui-table-cell>
+        <zui-table-cell>10,089 A.G.</zui-table-cell>
+        <zui-table-cell>10,156 A.G.</zui-table-cell>
+        <zui-table-cell>67 years old</zui-table-cell>
+      </zui-table-row>
+      <zui-table-row>
+        <zui-table-cell>Leto Atreides I</zui-table-cell>
+        <zui-table-cell>Red Duke</zui-table-cell>
+        <zui-table-cell>10,140 A.G.</zui-table-cell>
+        <zui-table-cell>10,191 A.G.</zui-table-cell>
+        <zui-table-cell>51 years old</zui-table-cell>
+      </zui-table-row>
+      <zui-table-row>
+        <zui-table-cell>Paul Atreides</zui-table-cell>
+        <zui-table-cell>Padishah Emperor</zui-table-cell>
+        <zui-table-cell>10,176 A.G.</zui-table-cell>
+        <zui-table-cell>10,219 A.G.</zui-table-cell>
+        <zui-table-cell>43 years old</zui-table-cell>
+      </zui-table-row>
+      <zui-table-row>
+        <zui-table-cell>Alia Atreides</zui-table-cell>
+        <zui-table-cell>Imperial Regent</zui-table-cell>
+        <zui-table-cell>10,191 A.G.</zui-table-cell>
+        <zui-table-cell>10,219 A.G.</zui-table-cell>
+        <zui-table-cell>28 years old</zui-table-cell>
+      </zui-table-row>
+      <zui-table-row>
+        <zui-table-cell>Leto Atreides II</zui-table-cell>
+        <zui-table-cell>God Emperor</zui-table-cell>
+        <zui-table-cell>10,207 A.G.</zui-table-cell>
+        <zui-table-cell>13,728 A.G.</zui-table-cell>
+        <zui-table-cell>3,521 years old</zui-table-cell>
+      </zui-table-row>
+    </zui-table>
+    <h2>Table with row headers</h2>
+    <zui-table columns="5">
+      <zui-table-row header>
+        <zui-table-cell>Name</zui-table-cell>
+        <zui-table-cell>Title</zui-table-cell>
+        <zui-table-cell>Born</zui-table-cell>
+        <zui-table-cell>Died</zui-table-cell>
+        <zui-table-cell>Age</zui-table-cell>
+      </zui-table-row>
+      <zui-table-row>
+        <zui-table-cell>Paulus Atreides</zui-table-cell>
+        <zui-table-cell>Old Duke</zui-table-cell>
+        <zui-table-cell>10,089 A.G.</zui-table-cell>
+        <zui-table-cell>10,156 A.G.</zui-table-cell>
+        <zui-table-cell>67 years old</zui-table-cell>
+      </zui-table-row>
+      <zui-table-row>
+        <zui-table-cell>Leto Atreides I</zui-table-cell>
+        <zui-table-cell>Red Duke</zui-table-cell>
+        <zui-table-cell>10,140 A.G.</zui-table-cell>
+        <zui-table-cell>10,191 A.G.</zui-table-cell>
+        <zui-table-cell>51 years old</zui-table-cell>
+      </zui-table-row>
+      <zui-table-row>
+        <zui-table-cell>Paul Atreides</zui-table-cell>
+        <zui-table-cell>Padishah Emperor</zui-table-cell>
+        <zui-table-cell>10,176 A.G.</zui-table-cell>
+        <zui-table-cell>10,219 A.G.</zui-table-cell>
+        <zui-table-cell>43 years old</zui-table-cell>
+      </zui-table-row>
+      <zui-table-row>
+        <zui-table-cell>Alia Atreides</zui-table-cell>
+        <zui-table-cell>Imperial Regent</zui-table-cell>
+        <zui-table-cell>10,191 A.G.</zui-table-cell>
+        <zui-table-cell>10,219 A.G.</zui-table-cell>
+        <zui-table-cell>28 years old</zui-table-cell>
+      </zui-table-row>
+      <zui-table-row>
+        <zui-table-cell>Leto Atreides II</zui-table-cell>
+        <zui-table-cell>God Emperor</zui-table-cell>
+        <zui-table-cell>10,207 A.G.</zui-table-cell>
+        <zui-table-cell>13,728 A.G.</zui-table-cell>
+        <zui-table-cell>3,521 years old</zui-table-cell>
+      </zui-table-row>
+    </zui-table>
+    <h2>Table with summary row</h2>
+    <zui-table columns="5">
+      <zui-table-row header>
+        <zui-table-cell>Name</zui-table-cell>
+        <zui-table-cell>Title</zui-table-cell>
+        <zui-table-cell>Born</zui-table-cell>
+        <zui-table-cell>Died</zui-table-cell>
+        <zui-table-cell>Age</zui-table-cell>
+      </zui-table-row>
+      <zui-table-row>
+        <zui-table-cell>Paulus Atreides</zui-table-cell>
+        <zui-table-cell>Old Duke</zui-table-cell>
+        <zui-table-cell>10,089 A.G.</zui-table-cell>
+        <zui-table-cell>10,156 A.G.</zui-table-cell>
+        <zui-table-cell>67 years old</zui-table-cell>
+      </zui-table-row>
+      <zui-table-row>
+        <zui-table-cell>Leto Atreides I</zui-table-cell>
+        <zui-table-cell>Red Duke</zui-table-cell>
+        <zui-table-cell>10,140 A.G.</zui-table-cell>
+        <zui-table-cell>10,191 A.G.</zui-table-cell>
+        <zui-table-cell>51 years old</zui-table-cell>
+      </zui-table-row>
+      <zui-table-row>
+        <zui-table-cell>Paul Atreides</zui-table-cell>
+        <zui-table-cell>Padishah Emperor</zui-table-cell>
+        <zui-table-cell>10,176 A.G.</zui-table-cell>
+        <zui-table-cell>10,219 A.G.</zui-table-cell>
+        <zui-table-cell>43 years old</zui-table-cell>
+      </zui-table-row>
+      <zui-table-row>
+        <zui-table-cell>Alia Atreides</zui-table-cell>
+        <zui-table-cell>Imperial Regent</zui-table-cell>
+        <zui-table-cell>10,191 A.G.</zui-table-cell>
+        <zui-table-cell>10,219 A.G.</zui-table-cell>
+        <zui-table-cell>28 years old</zui-table-cell>
+      </zui-table-row>
+      <zui-table-row>
+        <zui-table-cell>Leto Atreides II</zui-table-cell>
+        <zui-table-cell>God Emperor</zui-table-cell>
+        <zui-table-cell>10,207 A.G.</zui-table-cell>
+        <zui-table-cell>13,728 A.G.</zui-table-cell>
+        <zui-table-cell>3,521 years old</zui-table-cell>
+      </zui-table-row>
+      <zui-table-row summary>
+        <zui-table-cell span="5" style="text-align: right;">
+          Average lifespan: 742 years
+        </zui-table-cell>
+      </zui-table-row>
+    </zui-table>
+    <h2>Table topbar with search and counter</h2>
+    <zui-table columns="5">
+      <zui-table-topbar>
+        <zui-search placeholder="Search for a family member" no-submit></zui-search>
+        <div slot="counter">5 family members</div>
+      </zui-table-topbar>
+      <zui-table-row header>
+        <zui-table-cell>Name</zui-table-cell>
+        <zui-table-cell>Title</zui-table-cell>
+        <zui-table-cell>Born</zui-table-cell>
+        <zui-table-cell>Died</zui-table-cell>
+        <zui-table-cell>Age</zui-table-cell>
+      </zui-table-row>
+      <zui-table-row>
+        <zui-table-cell>Paulus Atreides</zui-table-cell>
+        <zui-table-cell>Old Duke</zui-table-cell>
+        <zui-table-cell>10,089 A.G.</zui-table-cell>
+        <zui-table-cell>10,156 A.G.</zui-table-cell>
+        <zui-table-cell>67 years old</zui-table-cell>
+      </zui-table-row>
+      <zui-table-row>
+        <zui-table-cell>Leto Atreides I</zui-table-cell>
+        <zui-table-cell>Red Duke</zui-table-cell>
+        <zui-table-cell>10,140 A.G.</zui-table-cell>
+        <zui-table-cell>10,191 A.G.</zui-table-cell>
+        <zui-table-cell>51 years old</zui-table-cell>
+      </zui-table-row>
+      <zui-table-row>
+        <zui-table-cell>Paul Atreides</zui-table-cell>
+        <zui-table-cell>Padishah Emperor</zui-table-cell>
+        <zui-table-cell>10,176 A.G.</zui-table-cell>
+        <zui-table-cell>10,219 A.G.</zui-table-cell>
+        <zui-table-cell>43 years old</zui-table-cell>
+      </zui-table-row>
+      <zui-table-row>
+        <zui-table-cell>Alia Atreides</zui-table-cell>
+        <zui-table-cell>Imperial Regent</zui-table-cell>
+        <zui-table-cell>10,191 A.G.</zui-table-cell>
+        <zui-table-cell>10,219 A.G.</zui-table-cell>
+        <zui-table-cell>28 years old</zui-table-cell>
+      </zui-table-row>
+      <zui-table-row>
+        <zui-table-cell>Leto Atreides II</zui-table-cell>
+        <zui-table-cell>God Emperor</zui-table-cell>
+        <zui-table-cell>10,207 A.G.</zui-table-cell>
+        <zui-table-cell>13,728 A.G.</zui-table-cell>
+        <zui-table-cell>3,521 years old</zui-table-cell>
+      </zui-table-row>
+      <zui-table-row summary>
+        <zui-table-cell span="5" style="text-align: right;">
+          Average lifespan: 742 years
+        </zui-table-cell>
+      </zui-table-row>
+    </zui-table>
+    <h2>Table topbar with search, counter, and actions</h2>
+    <zui-table columns="5">
+      <zui-table-topbar>
+        <zui-search placeholder="Search for a family member" no-submit></zui-search>
+        <div slot="counter">5 family members</div>
+        <zui-button slot="action" class="secondary">Whisper</zui-button>
+        <zui-button slot="action">Add a family member</zui-button>
+      </zui-table-topbar>
+      <zui-table-row header>
+        <zui-table-cell>Name</zui-table-cell>
+        <zui-table-cell>Title</zui-table-cell>
+        <zui-table-cell>Born</zui-table-cell>
+        <zui-table-cell>Died</zui-table-cell>
+        <zui-table-cell>Age</zui-table-cell>
+      </zui-table-row>
+      <zui-table-row>
+        <zui-table-cell>Paulus Atreides</zui-table-cell>
+        <zui-table-cell>Old Duke</zui-table-cell>
+        <zui-table-cell>10,089 A.G.</zui-table-cell>
+        <zui-table-cell>10,156 A.G.</zui-table-cell>
+        <zui-table-cell>67 years old</zui-table-cell>
+      </zui-table-row>
+      <zui-table-row>
+        <zui-table-cell>Leto Atreides I</zui-table-cell>
+        <zui-table-cell>Red Duke</zui-table-cell>
+        <zui-table-cell>10,140 A.G.</zui-table-cell>
+        <zui-table-cell>10,191 A.G.</zui-table-cell>
+        <zui-table-cell>51 years old</zui-table-cell>
+      </zui-table-row>
+      <zui-table-row>
+        <zui-table-cell>Paul Atreides</zui-table-cell>
+        <zui-table-cell>Padishah Emperor</zui-table-cell>
+        <zui-table-cell>10,176 A.G.</zui-table-cell>
+        <zui-table-cell>10,219 A.G.</zui-table-cell>
+        <zui-table-cell>43 years old</zui-table-cell>
+      </zui-table-row>
+      <zui-table-row>
+        <zui-table-cell>Alia Atreides</zui-table-cell>
+        <zui-table-cell>Imperial Regent</zui-table-cell>
+        <zui-table-cell>10,191 A.G.</zui-table-cell>
+        <zui-table-cell>10,219 A.G.</zui-table-cell>
+        <zui-table-cell>28 years old</zui-table-cell>
+      </zui-table-row>
+      <zui-table-row>
+        <zui-table-cell>Leto Atreides II</zui-table-cell>
+        <zui-table-cell>God Emperor</zui-table-cell>
+        <zui-table-cell>10,207 A.G.</zui-table-cell>
+        <zui-table-cell>13,728 A.G.</zui-table-cell>
+        <zui-table-cell>3,521 years old</zui-table-cell>
+      </zui-table-row>
+      <zui-table-row summary>
+        <zui-table-cell span="5" style="text-align: right;">
+          Average lifespan: 742 years
+        </zui-table-cell>
+      </zui-table-row>
+    </zui-table>
+    <h2>Table with footer</h2>
+    <zui-table columns="5">
+      <zui-table-topbar>
+        <zui-search placeholder="Search for a family member" no-submit></zui-search>
+        <div slot="counter">5 family members</div>
+        <zui-button slot="action" class="secondary">Whisper</zui-button>
+        <zui-button slot="action">Add a family member</zui-button>
+      </zui-table-topbar>
+      <zui-table-row header>
+        <zui-table-cell>Name</zui-table-cell>
+        <zui-table-cell>Title</zui-table-cell>
+        <zui-table-cell>Born</zui-table-cell>
+        <zui-table-cell>Died</zui-table-cell>
+        <zui-table-cell>Age</zui-table-cell>
+      </zui-table-row>
+      <zui-table-row>
+        <zui-table-cell>Paulus Atreides</zui-table-cell>
+        <zui-table-cell>Old Duke</zui-table-cell>
+        <zui-table-cell>10,089 A.G.</zui-table-cell>
+        <zui-table-cell>10,156 A.G.</zui-table-cell>
+        <zui-table-cell>67 years old</zui-table-cell>
+      </zui-table-row>
+      <zui-table-row>
+        <zui-table-cell>Leto Atreides I</zui-table-cell>
+        <zui-table-cell>Red Duke</zui-table-cell>
+        <zui-table-cell>10,140 A.G.</zui-table-cell>
+        <zui-table-cell>10,191 A.G.</zui-table-cell>
+        <zui-table-cell>51 years old</zui-table-cell>
+      </zui-table-row>
+      <zui-table-row>
+        <zui-table-cell>Paul Atreides</zui-table-cell>
+        <zui-table-cell>Padishah Emperor</zui-table-cell>
+        <zui-table-cell>10,176 A.G.</zui-table-cell>
+        <zui-table-cell>10,219 A.G.</zui-table-cell>
+        <zui-table-cell>43 years old</zui-table-cell>
+      </zui-table-row>
+      <zui-table-row>
+        <zui-table-cell>Alia Atreides</zui-table-cell>
+        <zui-table-cell>Imperial Regent</zui-table-cell>
+        <zui-table-cell>10,191 A.G.</zui-table-cell>
+        <zui-table-cell>10,219 A.G.</zui-table-cell>
+        <zui-table-cell>28 years old</zui-table-cell>
+      </zui-table-row>
+      <zui-table-row>
+        <zui-table-cell>Leto Atreides II</zui-table-cell>
+        <zui-table-cell>God Emperor</zui-table-cell>
+        <zui-table-cell>10,207 A.G.</zui-table-cell>
+        <zui-table-cell>13,728 A.G.</zui-table-cell>
+        <zui-table-cell>3,521 years old</zui-table-cell>
+      </zui-table-row>
+      <zui-table-row summary>
+        <zui-table-cell span="5" style="text-align: right;">
+          Average lifespan: 742 years
+        </zui-table-cell>
+      </zui-table-row>
+      <zui-table-footer>
+        <zui-pager current-page="1" total-pages="10"></zui-pager>
+      </zui-table-footer>
+    </zui-table>
+    <h2>No results table with simple custom message</h2>
+    <zui-table columns="5" no-results>
+      <zui-table-topbar>
+        <zui-search placeholder="Search for a family member" value="Spongebob Squarepants" no-submit></zui-search>
+        <div slot="counter">0 family members</div>
+        <zui-button slot="action" class="secondary">Whisper</zui-button>
+        <zui-button slot="action">Add a family member</zui-button>
+      </zui-table-topbar>
+      <zui-table-row header>
+        <zui-table-cell>Name</zui-table-cell>
+        <zui-table-cell>Title</zui-table-cell>
+        <zui-table-cell>Born</zui-table-cell>
+        <zui-table-cell>Died</zui-table-cell>
+        <zui-table-cell>Age</zui-table-cell>
+      </zui-table-row>
+      <div slot="no-results-message" class="zui font-weight-semibold">No results found for "Spongebob Squarepants"</div>
+      <zui-table-footer>
+        <zui-pager current-page="1" total-pages="10"></zui-pager>
+      </zui-table-footer>
+    </zui-table>
+    <h2>No results table with elaborate custom message</h2>
+    <zui-table columns="5" no-results>
+      <zui-table-topbar>
+        <zui-search placeholder="Search for a family member" value="Spongebob Squarepants" no-submit></zui-search>
+        <div slot="counter">0 family members</div>
+        <zui-button slot="action" class="secondary">Whisper</zui-button>
+        <zui-button slot="action">Add a family member</zui-button>
+      </zui-table-topbar>
+      <zui-table-row header>
+        <zui-table-cell>Name</zui-table-cell>
+        <zui-table-cell>Title</zui-table-cell>
+        <zui-table-cell>Born</zui-table-cell>
+        <zui-table-cell>Died</zui-table-cell>
+        <zui-table-cell>Age</zui-table-cell>
+      </zui-table-row>
+      <div slot="no-results-message" style="text-align: center;">
+        <div style="font-size: 2rem; margin-bottom: 0.5em;">¯\_(ツ)_/¯</div>
+        <p class="zui font-weight-semibold">No results for "Spongebob Squarepants"</p>
+        <p>Searching through all the Dune lore yielded no results.</p>
+      </div>
+      <zui-table-footer>
+        <zui-pager current-page="1" total-pages="10"></zui-pager>
+      </zui-table-footer>
+    </zui-table>
+    <h2>Table with banded rows</h2>
+    <zui-table columns="5" banded>
+      <zui-table-topbar>
+        <zui-search placeholder="Search for a family member" no-submit></zui-search>
+        <div slot="counter">5 family members</div>
+        <zui-button slot="action" class="secondary">Whisper</zui-button>
+        <zui-button slot="action">Add a family member</zui-button>
+      </zui-table-topbar>
+      <zui-table-row header>
+        <zui-table-cell>Name</zui-table-cell>
+        <zui-table-cell>Title</zui-table-cell>
+        <zui-table-cell>Born</zui-table-cell>
+        <zui-table-cell>Died</zui-table-cell>
+        <zui-table-cell>Age</zui-table-cell>
+      </zui-table-row>
+      <zui-table-row>
+        <zui-table-cell>Paulus Atreides</zui-table-cell>
+        <zui-table-cell>Old Duke</zui-table-cell>
+        <zui-table-cell>10,089 A.G.</zui-table-cell>
+        <zui-table-cell>10,156 A.G.</zui-table-cell>
+        <zui-table-cell>67 years old</zui-table-cell>
+      </zui-table-row>
+      <zui-table-row>
+        <zui-table-cell>Leto Atreides I</zui-table-cell>
+        <zui-table-cell>Red Duke</zui-table-cell>
+        <zui-table-cell>10,140 A.G.</zui-table-cell>
+        <zui-table-cell>10,191 A.G.</zui-table-cell>
+        <zui-table-cell>51 years old</zui-table-cell>
+      </zui-table-row>
+      <zui-table-row>
+        <zui-table-cell>Paul Atreides</zui-table-cell>
+        <zui-table-cell>Padishah Emperor</zui-table-cell>
+        <zui-table-cell>10,176 A.G.</zui-table-cell>
+        <zui-table-cell>10,219 A.G.</zui-table-cell>
+        <zui-table-cell>43 years old</zui-table-cell>
+      </zui-table-row>
+      <zui-table-row>
+        <zui-table-cell>Alia Atreides</zui-table-cell>
+        <zui-table-cell>Imperial Regent</zui-table-cell>
+        <zui-table-cell>10,191 A.G.</zui-table-cell>
+        <zui-table-cell>10,219 A.G.</zui-table-cell>
+        <zui-table-cell>28 years old</zui-table-cell>
+      </zui-table-row>
+      <zui-table-row>
+        <zui-table-cell>Leto Atreides II</zui-table-cell>
+        <zui-table-cell>God Emperor</zui-table-cell>
+        <zui-table-cell>10,207 A.G.</zui-table-cell>
+        <zui-table-cell>13,728 A.G.</zui-table-cell>
+        <zui-table-cell>3,521 years old</zui-table-cell>
+      </zui-table-row>
+      <zui-table-row summary>
+        <zui-table-cell span="5" style="text-align: right;">
+          Average lifespan: 742 years
+        </zui-table-cell>
+      </zui-table-row>
+      <zui-table-footer>
+        <zui-pager current-page="1" total-pages="10"></zui-pager>
+      </zui-table-footer>
+    </zui-table>
+    <script>
+      // zui-base-styles needs this for dumb IE11 if you add rel="zui-stylesheet"
+      // window.zui.importCustomStyles();
+      // Uncomment to test FOUC styling
+      // customElements.define = function () { };
+    </script>
+  </body>
+</html>

package/package.json ADDED Viewed

@@ -0,0 +1,37 @@
+{
+  "name": "@zywave/zui-table",
+  "version": "4.0.0-pre.1",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "license": "UNLICENSED",
+  "scripts": {
+    "build": "yarn run build:scss && yarn run build:ts",
+    "build:clean": "node ../../../scripts/node/remove-build-files.mjs && yarn run build",
+    "build:scss": "node ../../../scripts/node/sass.mjs",
+    "build:ts": "tsc -p tsconfig.build.json",
+    "launch-server:demo": "es-dev-server --root-dir ../../../ --app-index packages/components/zui-table/demo/index.html --open --node-resolve --watch",
+    "launch-server:lab": "es-dev-server --root-dir ../../../ --app-index packages/components/zui-table/lab.html --open --node-resolve --watch",
+    "demo": "npm-run-all build --parallel watcher:start launch-server:demo",
+    "watch": "npm-run-all build --parallel watcher:start launch-server:lab",
+    "watcher:start": "node ../../../scripts/node/watcher.mjs",
+    "analyze": "cem analyze --globs src/zui-*.ts --litelement --outdir dist"
+  },
+  "devDependencies": {
+    "autoprefixer": "^9.7.6",
+    "browser-sync": "^2.23.7",
+    "cssnano": "^4.1.10",
+    "del": "^5.1.0",
+    "polyserve": "^0.27.8",
+    "postcss": "^7.0.27",
+    "rollup": "^2.6.1",
+    "rollup-plugin-babel": "^4.4.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "customElements": "dist/custom-elements.json",
+  "dependencies": {
+    "@zywave/zui-base": "^4.1.18-pre.0"
+  },
+  "gitHead": "94482dca5e86ed4d0b0850b10341d0de96700230"
+}

package/src/css/zui-table.fouc.scss ADDED Viewed

@@ -0,0 +1,137 @@
+@use '@zywave/zui-sass-scripts' as *;
+zui-table {
+  @include undefined-element {
+    display: block;
+    width: 100%;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.29);
+    border-collapse: collapse;
+    border-spacing: 0;
+    [slot='topbar'] {
+      display: flex;
+      min-height: rem(60);
+      align-items: center;
+      padding: rem(10) rem(20);
+      background-color: var(--zui-gray-25);
+    }
+    [slot='footer'] {
+      margin-top: rem(10);
+    }
+    [slot='no-results-message'] {
+      display: none;
+    }
+  }
+}
+zui-table[banded] {
+  @include undefined-element {
+    zui-table-row:not([header]):nth-child(even) {
+      background-color: var(--zui-gray-25);
+    }
+    zui-table-row:not([header]) {
+      border: 0;
+    }
+  }
+}
+zui-table[no-results] {
+  @include undefined-element {
+    [slot='no-results-message'] {
+      display: block;
+      padding: rem(12) rem(20);
+    }
+  }
+}
+zui-table-topbar {
+  @include undefined-element {
+    display: flex;
+    width: 100%;
+    min-height: rem(60);
+    align-items: center;
+    padding: rem(10) rem(20);
+    background-color: var(--zui-gray-25);
+    [slot='counter'] {
+      flex-shrink: 0;
+      margin-left: auto;
+      padding-left: rem(10);
+      font-size: rem(12);
+      color: var(--zui-gray-400);
+    }
+    [slot='action'] {
+      margin-left: rem(10);
+      zui-button:not(:first-of-type) {
+        margin-left: rem(10);
+      }
+    }
+  }
+}
+zui-table-row {
+  @include undefined-element {
+    display: flex;
+    background-color: #fff;
+  }
+}
+zui-table-row[header] {
+  @include undefined-element {
+    background-color: #fff;
+    border-bottom: 1px solid var(--zui-gray-200);
+    zui-table-cell {
+      font-weight: 600;
+    }
+  }
+}
+zui-table-row:not([header]) {
+  @include undefined-element {
+    border-bottom: 1px solid var(--zui-gray-100);
+  }
+}
+zui-table-row:not([header]):last-of-type {
+  @include undefined-element {
+    border-bottom: 0;
+  }
+}
+zui-table-row[summary] {
+  @include undefined-element {
+    background-color: var(--zui-table-summary-background-color, var(--zui-gray-600)) !important;
+    zui-table-cell {
+      font-weight: 600;
+      color: var(--zui-table-summary-text-color, #fff);
+    }
+  }
+}
+zui-table-cell {
+  @include undefined-element {
+    flex-grow: 1;
+    flex-basis: 0;
+    padding: var(--zui-table-cell-padding, #{rem(13)} #{rem(20)});
+  }
+}
+zui-table-footer {
+  @include undefined-element {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: var(--zui-table-footer-margin, #{rem(10)});
+    zui-pager {
+      width: 100%;
+    }
+  }
+}

package/src/index.ts ADDED Viewed

@@ -0,0 +1,5 @@
+export * from './zui-table.js';
+export * from './zui-table-topbar.js';
+export * from './zui-table-footer.js';
+export * from './zui-table-row.js';
+export * from './zui-table-cell.js';

package/src/zui-table-cell-css.js ADDED Viewed

@@ -0,0 +1,3 @@
+import { css } from 'lit';
+export const style = css`div{padding:var(--zui-table-cell-padding, 0.8125rem 1.25rem)}`;

package/src/zui-table-cell.scss ADDED Viewed

@@ -0,0 +1,5 @@
+@use '@zywave/zui-sass-scripts' as *;
+div {
+  padding: var(--zui-table-cell-padding, #{rem(13)} #{rem(20)});
+}