-
-
Table using <table>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- |
- machine-name
- |
- 1/22/2025 |
-
- 0.3.4
- |
-
-
- |
-
-
-
-
-
- |
-
-
- |
-
-
- |
-
-
-
- |
- machine-name
- |
- viam-dev |
- 0.3.4
- |
- |
-
- |
-
-
-
-
-
- |
-
-
- |
-
-
-
-
-
-
Table using <ul>
-
-
-
-
-
- -
-
- machine-name
-
- 1/22/2025
-
- 0.3.4
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- machine-name
-
- viam-dev
-
- 0.3.4
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
New table component
-
-
-
- Text w/ link
- Text w/o link
- Mono text
- Pill
- Tag
- Breadcrumbs
- Icon
-
-
-
-
-
-
Badge
@@ -947,6 +531,7 @@ const columns = ['16%', '15%', '13%', '16%', '16%', '1fr', 'auto'];
+
Progress
@@ -1326,7 +911,7 @@ const columns = ['16%', '15%', '13%', '16%', '16%', '1fr', 'auto'];
/>
-
+
Restricted Text Input
@@ -2001,36 +1586,546 @@ const columns = ['16%', '15%', '13%', '16%', '16%', '1fr', 'auto'];
-
+
Table
-
-
- headerheaderheader (mario underwater theme)
+
+
-
-
- the mitochondria is the powerhouse of the tablecellPill
+
+
+
+
+
+
+
+
+ machine-name
- stuffs
-
-
- stuff
- stuffs
-
-
- stuff
- stuffs
-
-
- stuff
- stuffs
-
-
-
+
+
1/22/2025
+
+ 0.3.4
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ machine-name
+
+ viam-dev
+
+ 0.3.4
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ machine-name
+
+ viam-dev
+
+ 0.3.4
+
+
+ testing
+
+
+ min
+
+
+ width
+
+
+
+
+
+
+
+
Example: All machines dashboard
+
+
+
+
+
Example: Teleop workspaces
+
+
Tabs
From 2b1843c8a82b0e18b4f9766f631732205bb1c9d7 Mon Sep 17 00:00:00 2001
From: Joyce Jiang <76878583+joycexjiang@users.noreply.github.com>
Date: Wed, 29 Jan 2025 13:25:07 -0500
Subject: [PATCH 04/10] prettier lint errors
---
packages/core/plugins.ts | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/packages/core/plugins.ts b/packages/core/plugins.ts
index d343ae8b3..4a69bc988 100644
--- a/packages/core/plugins.ts
+++ b/packages/core/plugins.ts
@@ -318,7 +318,6 @@ export const plugins = [
{ values: theme('cursor') }
);
-
/* Table style guide with custom classes */
addComponents({
'.grid-container': {
@@ -332,7 +331,8 @@ export const plugins = [
{},
},
'.table-cell': {
- '@apply min-h-12 content-center items-center truncate border-b border-light p-2': {},
+ '@apply min-h-12 content-center items-center truncate border-b border-light p-2':
+ {},
},
'.table-cell-link': {
'@apply flex h-full w-full items-center hover:underline': {},
From 9ca28c9c36c34b972402f27bccfdd527dd03725e Mon Sep 17 00:00:00 2001
From: Joyce Jiang <76878583+joycexjiang@users.noreply.github.com>
Date: Wed, 22 Jan 2025 14:40:29 -0500
Subject: [PATCH 05/10] new table component
---
packages/core/src/lib/index.ts | 3 +
.../new_table_lists/list-table-cell.svelte | 22 ++++
.../src/lib/new_table_lists/list-table.svelte | 50 ++++++++
packages/core/src/routes/+page.svelte | 109 ++++++++++++++++++
4 files changed, 184 insertions(+)
create mode 100644 packages/core/src/lib/new_table_lists/list-table-cell.svelte
create mode 100644 packages/core/src/lib/new_table_lists/list-table.svelte
diff --git a/packages/core/src/lib/index.ts b/packages/core/src/lib/index.ts
index 78eb130f9..52bb6f0f4 100644
--- a/packages/core/src/lib/index.ts
+++ b/packages/core/src/lib/index.ts
@@ -81,3 +81,6 @@ export { useTimeout } from './use-timeout';
export { uniqueId } from './unique-id';
export { default as VectorInput } from './vector-input.svelte';
export { highlightCode } from './highlight-code';
+
+export { default as ListTable } from './new_table_lists/list-table.svelte';
+export { default as ListTableCell } from './new_table_lists/list-table-cell.svelte';
diff --git a/packages/core/src/lib/new_table_lists/list-table-cell.svelte b/packages/core/src/lib/new_table_lists/list-table-cell.svelte
new file mode 100644
index 000000000..993206da1
--- /dev/null
+++ b/packages/core/src/lib/new_table_lists/list-table-cell.svelte
@@ -0,0 +1,22 @@
+
+
+
+
+
diff --git a/packages/core/src/lib/new_table_lists/list-table.svelte b/packages/core/src/lib/new_table_lists/list-table.svelte
new file mode 100644
index 000000000..92116d750
--- /dev/null
+++ b/packages/core/src/lib/new_table_lists/list-table.svelte
@@ -0,0 +1,50 @@
+
+
+
+
0
+ ? `grid-template-columns: ${cols.join(' ')}; display: grid;`
+ : 'display: grid; grid-template-columns: auto auto auto;'}
+>
+
+
+
+
+
diff --git a/packages/core/src/routes/+page.svelte b/packages/core/src/routes/+page.svelte
index 3fbe6f95f..0bf940cee 100644
--- a/packages/core/src/routes/+page.svelte
+++ b/packages/core/src/routes/+page.svelte
@@ -32,6 +32,8 @@ import {
TableHeaderCell,
TableHeader,
TableRow,
+ ListTable,
+ ListTableCell,
ToastBanner,
ToastContainer,
ToastVariant,
@@ -461,11 +463,118 @@ let hoverDelayMS = 1000;
const onHoverDelayMsInput = (event: Event) => {
hoverDelayMS = Number.parseInt((event.target as HTMLInputElement).value, 10);
};
+
+const variant = 'fixed';
+const columns = ['16%', '15%', '13%', '16%', '16%', '1fr', 'auto'];
+
+
+
New table component
+
+
+
+ Text w/ link
+ Text w/o link
+ Mono text
+ Pill
+ Tag
+ Breadcrumbs
+ Icon
+
+
+
+
+
+
Badge
From d3196bd08df261081069aa8d83d6349af544d9ba Mon Sep 17 00:00:00 2001
From: Joyce Jiang <76878583+joycexjiang@users.noreply.github.com>
Date: Thu, 23 Jan 2025 13:41:03 -0500
Subject: [PATCH 06/10] adding options of native table, native list for
discussion
---
packages/core/src/lib/index.ts | 4 +-
.../list-table-cell.svelte | 0
.../list-table.svelte | 3 +-
packages/core/src/lib/new_table/table.css | 40 +++
packages/core/src/routes/+page.svelte | 303 +++++++++++++++++-
5 files changed, 346 insertions(+), 4 deletions(-)
rename packages/core/src/lib/{new_table_lists => new_table}/list-table-cell.svelte (100%)
rename packages/core/src/lib/{new_table_lists => new_table}/list-table.svelte (95%)
create mode 100644 packages/core/src/lib/new_table/table.css
diff --git a/packages/core/src/lib/index.ts b/packages/core/src/lib/index.ts
index 52bb6f0f4..9a55deba3 100644
--- a/packages/core/src/lib/index.ts
+++ b/packages/core/src/lib/index.ts
@@ -82,5 +82,5 @@ export { uniqueId } from './unique-id';
export { default as VectorInput } from './vector-input.svelte';
export { highlightCode } from './highlight-code';
-export { default as ListTable } from './new_table_lists/list-table.svelte';
-export { default as ListTableCell } from './new_table_lists/list-table-cell.svelte';
+export { default as ListTable } from './new_table/list-table.svelte';
+export { default as ListTableCell } from './new_table/list-table-cell.svelte';
diff --git a/packages/core/src/lib/new_table_lists/list-table-cell.svelte b/packages/core/src/lib/new_table/list-table-cell.svelte
similarity index 100%
rename from packages/core/src/lib/new_table_lists/list-table-cell.svelte
rename to packages/core/src/lib/new_table/list-table-cell.svelte
diff --git a/packages/core/src/lib/new_table_lists/list-table.svelte b/packages/core/src/lib/new_table/list-table.svelte
similarity index 95%
rename from packages/core/src/lib/new_table_lists/list-table.svelte
rename to packages/core/src/lib/new_table/list-table.svelte
index 92116d750..e295e071f 100644
--- a/packages/core/src/lib/new_table_lists/list-table.svelte
+++ b/packages/core/src/lib/new_table/list-table.svelte
@@ -26,7 +26,7 @@ export { extraClasses as cx };
diff --git a/packages/core/src/lib/new_table/table.css b/packages/core/src/lib/new_table/table.css
new file mode 100644
index 000000000..c97923ddd
--- /dev/null
+++ b/packages/core/src/lib/new_table/table.css
@@ -0,0 +1,40 @@
+.table {
+ @apply w-full overflow-x-auto border border-b-0 border-light text-sm;
+}
+
+.table-header {
+ @apply bg-light;
+}
+
+.table-header .table-cell {
+ @apply cursor-default text-left font-medium text-subtle-1;
+}
+
+/* Ensure no hover styles for table headers */
+.table-header .table-cell {
+ @apply cursor-default bg-light text-left font-medium text-subtle-1;
+ pointer-events: none; /* Prevent hover interactions */
+}
+
+/* How can i make it where if the class is .table-header, the -table-row:hover doesn't override it, since the header cells shouldn't have a hover state */
+
+/* Hover for rows only (exclude header) */
+.table-row:hover:not(.table-header) .table-cell {
+ @apply bg-extralight;
+}
+
+.table-cell {
+ @apply border-b p-2;
+}
+
+.table-cell-link {
+ @apply flex items-center font-medium hover:underline;
+ width: 100%;
+ height: 100%;
+}
+
+/* How can I make it where if there are two items within a cell, have them have a gap between them? */
+
+.table-cell-flex {
+ @apply flex items-center gap-2;
+}
diff --git a/packages/core/src/routes/+page.svelte b/packages/core/src/routes/+page.svelte
index 0bf940cee..f245f9232 100644
--- a/packages/core/src/routes/+page.svelte
+++ b/packages/core/src/routes/+page.svelte
@@ -51,6 +51,7 @@ import {
Progress,
} from '$lib';
import { uniqueId } from 'lodash-es';
+import '../lib/new_table/table.css';
provideNotify();
@@ -471,13 +472,313 @@ const columns = ['16%', '15%', '13%', '16%', '16%', '1fr', 'auto'];
+
+
Table using <table>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ |
+ machine-name
+ |
+ 1/22/2025 |
+
+ 0.3.4
+ |
+
+
+ |
+
+
+
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+
+ |
+ machine-name
+ |
+ viam-dev |
+ 0.3.4
+ |
+ |
+
+ |
+
+
+
+
+
+ |
+
+
+ |
+
+
+
+
+
+
Table using <ul>
+
+
+
+
+
+ -
+
+ machine-name
+
+ 1/22/2025
+
+ 0.3.4
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ -
+
+ machine-name
+
+ viam-dev
+
+ 0.3.4
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
New table component
-
From f2abaf825540baf296edd922dce71601c2f8d355 Mon Sep 17 00:00:00 2001
From: Joyce Jiang <76878583+joycexjiang@users.noreply.github.com>
Date: Wed, 29 Jan 2025 13:15:38 -0500
Subject: [PATCH 07/10] added table classes
---
packages/core/plugins.ts | 26 +-
packages/core/src/lib/new_table/table.css | 33 +-
packages/core/src/routes/+page.svelte | 983 ++++++++++++----------
3 files changed, 573 insertions(+), 469 deletions(-)
diff --git a/packages/core/plugins.ts b/packages/core/plugins.ts
index 65ff7bbfe..d343ae8b3 100644
--- a/packages/core/plugins.ts
+++ b/packages/core/plugins.ts
@@ -2,7 +2,7 @@ import plugin from 'tailwindcss/plugin';
import type { OptionalConfig } from 'tailwindcss/types/config';
export const plugins = [
- plugin(({ addUtilities, matchUtilities, theme }) => {
+ plugin(({ addUtilities, matchUtilities, theme, addComponents }) => {
addUtilities({
'.scrollbar-thin': {
'scrollbar-width': 'thin',
@@ -317,5 +317,29 @@ export const plugins = [
},
{ values: theme('cursor') }
);
+
+
+ /* Table style guide with custom classes */
+ addComponents({
+ '.grid-container': {
+ '@apply w-full border border-b-0 border-light text-sm': {},
+ },
+ '.table-header': {
+ '@apply h-8 bg-light text-xs': {},
+ },
+ '.table-header-cell': {
+ '@apply h-8 min-h-0 content-center items-center truncate border-b border-light p-2 text-subtle-1':
+ {},
+ },
+ '.table-cell': {
+ '@apply min-h-12 content-center items-center truncate border-b border-light p-2': {},
+ },
+ '.table-cell-link': {
+ '@apply flex h-full w-full items-center hover:underline': {},
+ },
+ '.table-cell-flex': {
+ '@apply flex items-center gap-2': {},
+ },
+ });
}),
] satisfies OptionalConfig['plugins'];
diff --git a/packages/core/src/lib/new_table/table.css b/packages/core/src/lib/new_table/table.css
index c97923ddd..7fa072198 100644
--- a/packages/core/src/lib/new_table/table.css
+++ b/packages/core/src/lib/new_table/table.css
@@ -1,40 +1,25 @@
-.table {
- @apply w-full overflow-x-auto border border-b-0 border-light text-sm;
+.grid-container {
+ @apply w-full border border-b-0 border-light text-sm;
}
.table-header {
- @apply bg-light;
+ @apply h-8 bg-light text-xs;
}
-.table-header .table-cell {
- @apply cursor-default text-left font-medium text-subtle-1;
-}
-
-/* Ensure no hover styles for table headers */
-.table-header .table-cell {
- @apply cursor-default bg-light text-left font-medium text-subtle-1;
- pointer-events: none; /* Prevent hover interactions */
-}
-
-/* How can i make it where if the class is .table-header, the -table-row:hover doesn't override it, since the header cells shouldn't have a hover state */
-
-/* Hover for rows only (exclude header) */
-.table-row:hover:not(.table-header) .table-cell {
- @apply bg-extralight;
+.table-header-cell {
+ @apply h-8 min-h-0 content-center items-center truncate border-b border-light p-2 text-subtle-1;
}
.table-cell {
- @apply border-b p-2;
+ @apply min-h-12 content-center items-center truncate border-b border-light p-2;
}
+/* Cell with link */
.table-cell-link {
- @apply flex items-center font-medium hover:underline;
- width: 100%;
- height: 100%;
+ @apply flex h-full w-full items-center hover:underline;
}
-/* How can I make it where if there are two items within a cell, have them have a gap between them? */
-
+/* Cell with flexbox */
.table-cell-flex {
@apply flex items-center gap-2;
}
diff --git a/packages/core/src/routes/+page.svelte b/packages/core/src/routes/+page.svelte
index f245f9232..97281d7f2 100644
--- a/packages/core/src/routes/+page.svelte
+++ b/packages/core/src/routes/+page.svelte
@@ -26,14 +26,6 @@ import {
RestrictedTextInput,
SliderInput,
VectorInput,
- Table,
- TableBody,
- TableCell,
- TableHeaderCell,
- TableHeader,
- TableRow,
- ListTable,
- ListTableCell,
ToastBanner,
ToastContainer,
ToastVariant,
@@ -51,7 +43,6 @@ import {
Progress,
} from '$lib';
import { uniqueId } from 'lodash-es';
-import '../lib/new_table/table.css';
provideNotify();
@@ -464,418 +455,11 @@ let hoverDelayMS = 1000;
const onHoverDelayMsInput = (event: Event) => {
hoverDelayMS = Number.parseInt((event.target as HTMLInputElement).value, 10);
};
-
-const variant = 'fixed';
-const columns = ['16%', '15%', '13%', '16%', '16%', '1fr', 'auto'];
-
-
Table using <table>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- |
- machine-name
- |
- 1/22/2025 |
-
- 0.3.4
- |
-
-
- |
-
-
-
-
-
- |
-
-
- |
-
-
- |
-
-
-
- |
- machine-name
- |
- viam-dev |
- 0.3.4
- |
- |
-
- |
-
-
-
-
-
- |
-
-
- |
-
-
-
-
-
-
Table using <ul>
-
-
-
-
-
- -
-
- machine-name
-
- 1/22/2025
-
- 0.3.4
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- machine-name
-
- viam-dev
-
- 0.3.4
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
New table component
-
-
- -
- Text w/ link
- Text w/o link
- Mono text
- Pill
- Tag
- Breadcrumbs
- Icon
-
-
-
-
-
-
Badge
@@ -947,6 +531,7 @@ const columns = ['16%', '15%', '13%', '16%', '16%', '1fr', 'auto'];
+
Progress
@@ -1326,7 +911,7 @@ const columns = ['16%', '15%', '13%', '16%', '16%', '1fr', 'auto'];
/>
-
+
Restricted Text Input
@@ -2001,36 +1586,546 @@ const columns = ['16%', '15%', '13%', '16%', '16%', '1fr', 'auto'];
-
+
Table
-
-
- headerheaderheader (mario underwater theme)
+
+
-
-
- the mitochondria is the powerhouse of the tablecellPill
+
+
+
+
+
+
+ -
+
+ machine-name
- stuffs
-
-
- stuff
- stuffs
-
-
- stuff
- stuffs
-
-
- stuff
- stuffs
-
-
-
+
+
1/22/2025
+
+ 0.3.4
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
+ machine-name
+
+ viam-dev
+
+ 0.3.4
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
+ machine-name
+
+ viam-dev
+
+ 0.3.4
+
+
+ testing
+
+
+ min
+
+
+ width
+
+
+
+
+
+
+
+
Example: All machines dashboard
+
+
+
+
+
Example: Teleop workspaces
+
+
Tabs
From 6de7689e3fcd37e50d1491de395c50eb3a176d7a Mon Sep 17 00:00:00 2001
From: Joyce Jiang <76878583+joycexjiang@users.noreply.github.com>
Date: Wed, 29 Jan 2025 13:25:07 -0500
Subject: [PATCH 08/10] prettier lint errors
---
packages/core/plugins.ts | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/packages/core/plugins.ts b/packages/core/plugins.ts
index d343ae8b3..4a69bc988 100644
--- a/packages/core/plugins.ts
+++ b/packages/core/plugins.ts
@@ -318,7 +318,6 @@ export const plugins = [
{ values: theme('cursor') }
);
-
/* Table style guide with custom classes */
addComponents({
'.grid-container': {
@@ -332,7 +331,8 @@ export const plugins = [
{},
},
'.table-cell': {
- '@apply min-h-12 content-center items-center truncate border-b border-light p-2': {},
+ '@apply min-h-12 content-center items-center truncate border-b border-light p-2':
+ {},
},
'.table-cell-link': {
'@apply flex h-full w-full items-center hover:underline': {},
From 892ca01563ecd3c9929e1fcb0e5badfee95cdaef Mon Sep 17 00:00:00 2001
From: Joyce Jiang <76878583+joycexjiang@users.noreply.github.com>
Date: Fri, 31 Jan 2025 11:03:25 -0500
Subject: [PATCH 09/10] forgot to delete unused files sry
---
packages/core/src/lib/index.ts | 5 +-
.../src/lib/new_table/list-table-cell.svelte | 22 --------
.../core/src/lib/new_table/list-table.svelte | 51 -------------------
packages/core/src/lib/new_table/table.css | 25 ---------
4 files changed, 1 insertion(+), 102 deletions(-)
delete mode 100644 packages/core/src/lib/new_table/list-table-cell.svelte
delete mode 100644 packages/core/src/lib/new_table/list-table.svelte
delete mode 100644 packages/core/src/lib/new_table/table.css
diff --git a/packages/core/src/lib/index.ts b/packages/core/src/lib/index.ts
index 9a55deba3..34b6f2b93 100644
--- a/packages/core/src/lib/index.ts
+++ b/packages/core/src/lib/index.ts
@@ -80,7 +80,4 @@ export * from './keyboard';
export { useTimeout } from './use-timeout';
export { uniqueId } from './unique-id';
export { default as VectorInput } from './vector-input.svelte';
-export { highlightCode } from './highlight-code';
-
-export { default as ListTable } from './new_table/list-table.svelte';
-export { default as ListTableCell } from './new_table/list-table-cell.svelte';
+export { highlightCode } from './highlight-code';
\ No newline at end of file
diff --git a/packages/core/src/lib/new_table/list-table-cell.svelte b/packages/core/src/lib/new_table/list-table-cell.svelte
deleted file mode 100644
index 993206da1..000000000
--- a/packages/core/src/lib/new_table/list-table-cell.svelte
+++ /dev/null
@@ -1,22 +0,0 @@
-
-
-
-
-
-
diff --git a/packages/core/src/lib/new_table/list-table.svelte b/packages/core/src/lib/new_table/list-table.svelte
deleted file mode 100644
index e295e071f..000000000
--- a/packages/core/src/lib/new_table/list-table.svelte
+++ /dev/null
@@ -1,51 +0,0 @@
-
-
-
-
0
- ? `grid-template-columns: ${cols.join(' ')}; display: grid;`
- : 'display: grid; grid-template-columns: auto auto auto;'}
->
-
-
-
-
-
diff --git a/packages/core/src/lib/new_table/table.css b/packages/core/src/lib/new_table/table.css
deleted file mode 100644
index 7fa072198..000000000
--- a/packages/core/src/lib/new_table/table.css
+++ /dev/null
@@ -1,25 +0,0 @@
-.grid-container {
- @apply w-full border border-b-0 border-light text-sm;
-}
-
-.table-header {
- @apply h-8 bg-light text-xs;
-}
-
-.table-header-cell {
- @apply h-8 min-h-0 content-center items-center truncate border-b border-light p-2 text-subtle-1;
-}
-
-.table-cell {
- @apply min-h-12 content-center items-center truncate border-b border-light p-2;
-}
-
-/* Cell with link */
-.table-cell-link {
- @apply flex h-full w-full items-center hover:underline;
-}
-
-/* Cell with flexbox */
-.table-cell-flex {
- @apply flex items-center gap-2;
-}
From b9c74722300f13e505df9f4700c5a7dcd1a1923f Mon Sep 17 00:00:00 2001
From: Joyce Jiang <76878583+joycexjiang@users.noreply.github.com>
Date: Fri, 31 Jan 2025 11:18:49 -0500
Subject: [PATCH 10/10] prettier
---
packages/core/src/lib/index.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/core/src/lib/index.ts b/packages/core/src/lib/index.ts
index 34b6f2b93..78eb130f9 100644
--- a/packages/core/src/lib/index.ts
+++ b/packages/core/src/lib/index.ts
@@ -80,4 +80,4 @@ export * from './keyboard';
export { useTimeout } from './use-timeout';
export { uniqueId } from './unique-id';
export { default as VectorInput } from './vector-input.svelte';
-export { highlightCode } from './highlight-code';
\ No newline at end of file
+export { highlightCode } from './highlight-code';