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

Commit

Permalink
feat(Table): added Table component
Browse files Browse the repository at this point in the history
  • Loading branch information
@TheComputerM
TheComputerM committed Aug 15, 2020
1 parent 6b38d58 commit 6243ac9
Show file tree
Hide file tree
Showing 7 changed files with 170 additions and 0 deletions.
114 changes: 114 additions & 0 deletions packages/svelte-materialify/src/components/Table/Table.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
@import "./variables";

.s-table-wrapper {
overflow: auto;
}

.s-table {
background-color: var(--theme-cards);
color: var(--theme-text-primary);
width: 100%;
border-spacing: 0;

:global {
> tbody,
> thead,
> tfoot {
> tr {
> td,
> th {
padding: 0 16px;
transition: height map-get($transitions, "ease-in-out");
}

> th {
user-select: none;
font-size: $table-regular-header-font-size;
height: $table-regular-header-height;
text-align: left;
}

> td {
font-size: $table-regular-row-font-size;
height: $table-regular-row-height;
}
}
}

> thead {
> tr {
> th {
color: var(--theme-text-secondary);
}

&:last-child {
> th {
border-bottom: thin solid var(--theme-dividers);
}
}
}
}

> tbody {
/* stylelint-disable no-descending-specificity */
> tr {
&:not(:last-child) {
> td,
> th {
border-bottom: thin solid var(--theme-dividers);
}
}

&.active {
background: var(--theme-tables-active);
}

&:hover {
background: var(--theme-tables-hover);
}
}
/* stylelint-enable no-descending-specificity */
}
}

&.dense {
:global {
> tbody,
> thead,
> tfoot {
> tr {
> td {
height: $table-dense-row-height;
}

> th {
height: $table-dense-header-height;
}
}
}
}
}

&.fixed-header {
:global {
> thead {
> tr {
> th {
border-bottom: 0 !important;
position: sticky;
top: 0;
z-index: 2;
background-color: var(--theme-surface);
box-shadow: inset 0 -1px 0 var(--theme-dividers);
}

&:nth-child(2) {
> th {
top: $table-regular-header-height;
}
}
}
}
}
}
}
17 changes: 17 additions & 0 deletions packages/svelte-materialify/src/components/Table/Table.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<script>
let classes = '';
export let dense = false;
export let fixedHeader = false;
export let style = null;
export { classes as class };
</script>

<style lang="scss" src="./Table.scss">
</style>

<div class="s-table-wrapper {classes}" {style}>
<table class="s-table " class:dense class:fixed-header={fixedHeader}>
<slot />
</table>
</div>
24 changes: 24 additions & 0 deletions packages/svelte-materialify/src/components/Table/_variables.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
@import "../../styles/variables";

$table-border-radius: $border-radius-root !default;
$table-dense-header-height: 32px !default;
$table-dense-row-height: $table-dense-header-height !default;
$table-expanded-content-box-shadow: inset 0 4px 8px -5px rgba(50, 50, 50, 0.75), inset 0 -4px 8px -5px rgba(50, 50, 50, 0.75) !default;
$table-header-mobile-select-chip-height: 24px !default;
$table-header-mobile-select-margin-bottom: 8px !default;
$table-header-mobile-select-max-width: 56px !default;
$table-header-sort-badge-height: 18px !default;
$table-header-sort-badge-min-height: 18px !default;
$table-header-sort-badge-min-width: 18px !default;
$table-header-sort-badge-width: 18px !default;
$table-mobile-row-header-font-weight: 600 !default;
$table-mobile-row-min-height: 48px !default;
$table-progress-border-radius: $table-border-radius $table-border-radius 0 0 !default;
$table-regular-header-height: 48px !default;
$table-regular-row-height: 48px !default;
$table-row-group-children-td-height: 35px !default;
$table-scroll-bar-width: 17px !default;
$edit-dialog-content-padding: 0 16px !default;
$edit-dialog-actions-padding: 8px !default;
$table-regular-header-font-size: map-deep-get($headings, 'caption', 'size') !default;
$table-regular-row-font-size: map-deep-get($headings, 'subtitle-2', 'size') !default;
1 change: 1 addition & 0 deletions packages/svelte-materialify/src/components/Table/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from './Table.svelte';
1 change: 1 addition & 0 deletions packages/svelte-materialify/src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,3 +26,4 @@ export { default as NavigationDrawer } from './components/NavigationDrawer';
export { default as Subheader } from './components/Subheader';
export { Container, Row, Col } from './components/Grid';
export { default as Lazy } from './components/Lazy';
export { default as Table } from './components/Table';
3 changes: 3 additions & 0 deletions packages/svelte-materialify/src/styles/_theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,9 @@
--theme-icons-active: #{map-deep-get($material, "icons", "active")};
--theme-icons-inactive: #{map-deep-get($material, "icons", "inactive")};
--theme-buttons-disabled: #{map-deep-get($material, "buttons", "disabled")};
--theme-tables-active: #{map-deep-get($material, "tables", "active")};
--theme-tables-hover: #{map-deep-get($material, "tables", "hover")};
--theme-tables-group: #{map-deep-get($material, "tables", "group")};
--theme-dividers: #{map-get($material, "dividers")};
--theme-cards: #{map-get($material, "cards")};
--theme-app-bar: #{map-get($material, "app-bar")};
Expand Down
10 changes: 10 additions & 0 deletions packages/svelte-materialify/src/styles/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -270,6 +270,11 @@ $material-light-theme: map-deep-merge(
"buttons": (
"disabled": rgba(material-color("shades", "black"), 0.26),
),
"tables": (
"active": material-color("grey", "lighten-4"),
"hover": material-color("grey", "lighten-3"),
"group": material-color("grey", "lighten-3"),
),
"dividers": rgba(material-color("shades", "black"), 0.12),
"chips": #e0e0e0,
"cards": material-color("shades", "white"),
Expand Down Expand Up @@ -311,6 +316,11 @@ $material-dark-theme: map-deep-merge(
"buttons": (
"disabled": rgba(material-color("shades", "white"), 0.3),
),
"tables": (
"active": #505050,
"hover": material-color("grey", "darken-2"),
"group": material-color("grey", "darken-2"),
),
"dividers": rgba(material-color("shades", "white"), 0.12),
"chips": #555555,
"cards": map-get($material-dark-elevation-colors, '1'),
Expand Down

0 comments on commit 6243ac9

Please sign in to comment.