[feat](@svelteui/core): add new props to table and improve/fix styling

svelteuidev · Jan 18, 2024 · 348c75f · 348c75f
1 parent 35d82a3
commit 348c75f
Show file tree

Hide file tree

Showing 4 changed files with 103 additions and 20 deletions.
diff --git a/packages/svelteui-core/src/components/Table/Table.d.ts b/packages/svelteui-core/src/components/Table/Table.d.ts
@@ -1,10 +1,14 @@
 import { HTMLAttributes } from 'svelte/elements';
 import { DefaultProps, SvelteUINumberSize } from '$lib/styles';
 
-export interface TableProps extends DefaultProps, HTMLAttributes<HTMLElement> {
-	withBorder?: boolean;
+export interface TableProps<T = HTMLTableElement>
+	extends DefaultProps<T>,
+		HTMLAttributes<HTMLElement> {
 	striped?: boolean;
 	highlightOnHover?: boolean;
 	cellPadding?: SvelteUINumberSize;
 	textAlign?: 'center' | 'right' | 'left';
+	withRowBorder?: boolean;
+	withColumnBorder?: boolean;
+	withTableBorder?: boolean;
 }
diff --git a/packages/svelteui-core/src/components/Table/Table.stories.svelte b/packages/svelteui-core/src/components/Table/Table.stories.svelte
@@ -6,7 +6,48 @@
 <Meta title="Components/Table" component={Table} />
 
 <Template let:args>
-	<Table {...args} />
+	<Table {...args}>
+		<thead>
+			<tr>
+				<th>Project</th>
+				<th>Stars</th>
+				<th>Contributors</th>
+				<th>Forks</th>
+			</tr>
+		</thead>
+		<tbody>
+			<tr>
+				<td>freeCodeCamp/freeCodeCamp</td>
+				<td>381k</td>
+				<td>4887</td>
+				<td>35.5k</td>
+			</tr>
+			<tr>
+				<td>EbookFoundation/free-programming-books</td>
+				<td>307k</td>
+				<td>2854</td>
+				<td>59.1k</td>
+			</tr>
+			<tr>
+				<td>sindresorhus/awesome</td>
+				<td>286k</td>
+				<td>576</td>
+				<td>27k</td>
+			</tr>
+			<tr>
+				<td>jwasham/coding-interview-university</td>
+				<td>276k</td>
+				<td>303</td>
+				<td>71.4k</td>
+			</tr>
+			<tr>
+				<td>996icu/996.ICU</td>
+				<td>268k</td>
+				<td>642</td>
+				<td>21.5k</td>
+			</tr>
+		</tbody>
+	</Table>
 </Template>
 
 <Story name="Table" id="tableStory" />
diff --git a/packages/svelteui-core/src/components/Table/Table.styles.ts b/packages/svelteui-core/src/components/Table/Table.styles.ts
@@ -2,11 +2,13 @@ import { createStyles } from '$lib/styles';
 import type { SvelteUINumberSize } from '$lib/styles';
 
 export interface TableStyleParams {
-	withBorder: boolean;
 	striped: boolean;
 	highlightOnHover: boolean;
 	cellPadding: SvelteUINumberSize;
 	textAlign: 'center' | 'left' | 'right';
+	withRowBorder: boolean;
+	withColumnBorder: boolean;
+	withTableBorder: boolean;
 }
 
 export const padding = {
@@ -16,25 +18,56 @@ export const padding = {
 };
 
 export default createStyles(
-	(theme, { withBorder, highlightOnHover, striped, cellPadding, textAlign }: TableStyleParams) => {
+	(
+		theme,
+		{
+			highlightOnHover,
+			striped,
+			cellPadding,
+			textAlign,
+			withRowBorder,
+			withColumnBorder,
+			withTableBorder
+		}: TableStyleParams
+	) => {
 		const { themeColor } = theme.fn;
 		return {
 			root: {
+				tableLayout: 'auto',
 				borderCollapse: 'collapse',
 				cursor: highlightOnHover ? 'pointer' : 'default',
-				border: withBorder ? `1px solid ${themeColor('gray', 6)}` : '',
-				borderStyle: withBorder ? '' : 'hidden',
-				'& > * > th, & > * > td': {
+				border: withTableBorder ? `1px solid ${themeColor('gray', 3)}` : '',
+				'& > thead > tr > th, & > tbody > tr > td': {
 					padding:
 						typeof cellPadding === 'number' ? `${cellPadding}px` : `${padding[`${cellPadding}`]}px`,
-					border: `1px solid ${themeColor('gray', 6)}`,
 					textAlign
 				},
-				'& > tr:nth-child(even)': {
-					backgroundColor: striped ? themeColor('gray', 9) : ''
+				'& tr': {
+					borderBottom: withRowBorder ? `1px solid ${themeColor('gray', 3)}` : 'none'
 				},
-				'& > tr:hover': {
-					backgroundColor: highlightOnHover ? themeColor('gray', 9) : ''
+				'& td, & th': {
+					borderRight: withColumnBorder ? `1px solid ${themeColor('gray', 3)}` : 'none'
+				},
+				'& tbody tr:last-of-type': {
+					borderBottom: 'none'
+				},
+				'& td:last-of-type': {
+					borderRight: 'none'
+				},
+				'& tr:nth-child(even)': {
+					backgroundColor: striped ? themeColor('gray', 1) : '',
+					darkMode: {
+						backgroundColor: striped ? themeColor('dark', 6) : ''
+					}
+				},
+				'& > tbody > tr:hover': {
+					backgroundColor: highlightOnHover ? themeColor('gray', 2) : '',
+					darkMode: {
+						backgroundColor: highlightOnHover ? themeColor('dark', 5) : ''
+					}
+				},
+				darkMode: {
+					borderColor: themeColor('dark', 4)
 				}
 			}
 		};

diff --git a/packages/svelteui-core/src/components/Table/Table.svelte b/packages/svelteui-core/src/components/Table/Table.svelte
@@ -1,28 +1,33 @@
 <script lang="ts">
+	import { Box } from '../Box';
 	import type { TableProps as $$TableProps } from './Table';
 	import useStyles from './Table.styles';
 
 	interface $$Props extends $$TableProps {}
 
-	export let withBorder: $$Props['withBorder'] = false,
-		striped: $$Props['striped'] = false,
+	export let striped: $$Props['striped'] = false,
 		highlightOnHover: $$Props['highlightOnHover'] = false,
 		className: $$Props['className'] = 'table',
 		cellPadding: $$Props['cellPadding'] = 'sm',
-		textAlign: $$Props['textAlign'] = 'center';
+		textAlign: $$Props['textAlign'] = 'left',
+		withRowBorder: $$Props['withRowBorder'] = true,
+		withColumnBorder: $$Props['withColumnBorder'] = false,
+		withTableBorder: $$Props['withTableBorder'] = false;
 
 	$: ({ cx, classes } = useStyles(
 		{
-			withBorder,
 			striped,
 			highlightOnHover,
 			cellPadding,
-			textAlign
+			textAlign,
+			withRowBorder,
+			withColumnBorder,
+			withTableBorder
 		},
 		{ name: 'Table' }
 	));
 </script>
 
-<table class={cx(className, classes.root)}>
+<Box root="table" class={cx(className, classes.root)}>
 	<slot />
-</table>
+</Box>