Skip to content

Commit 7cc036c

Browse files
rstoenescurstoenescu
committed
feat: quasarframework#35 Polished HTML Table
1 parent cff2da6 commit 7cc036c

File tree

11 files changed

+188
-124
lines changed

11 files changed

+188
-124
lines changed

‎dev/views/grid.vue‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
<template>
2-
<h1>Grid Widget</h1>
3-
<quasar-grid
4-
:columns="columns"
5-
:data="data"
6-
:rows-per-page="5"
7-
:selection-mode="selection.mode"
8-
:selection-actions="selection.actions"
9-
id-property="unique_id"
10-
></quasar-grid>
2+
<div class="layout-padding">
3+
<h1>Grid Widget</h1>
4+
<quasar-grid
5+
:columns="columns"
6+
:data="data"
7+
:rows-per-page="5"
8+
:selection-mode="selection.mode"
9+
:selection-actions="selection.actions"
10+
id-property="unique_id"
11+
></quasar-grid>
12+
</div>
1113
</template>
1214

1315
<script>

‎dev/views/table.vue‎

Lines changed: 31 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,35 @@
11
<template>
2-
<div v-for="style in styles" style="margin-bottom: 30px">
3-
<h3>Class: '{{style}}'</h3>
4-
<table :class="style">
5-
<thead>
6-
<tr>
2+
<div class="layout-padding">
3+
<div v-for="style in styles" style="margin-bottom: 30px">
4+
<h3>Class: '{{style}}'</h3>
5+
<table :class="style" class="quasar-table">
6+
<thead>
7+
<tr>
78
<th>Name</th>
8-
<th>Price</th>
9-
<th>In Stock</th>
10-
</tr>
11-
</thead>
9+
<th class="text-right">Price</th>
10+
<th class="text-right">In Stock</th>
11+
</tr>
12+
</thead>
1213

13-
<tbody>
14-
<tr>
15-
<td>Item #1</td>
16-
<td>$10.11</td>
17-
<td>101</td>
18-
</tr>
19-
<tr>
20-
<td>Item #2</td>
21-
<td>$8.88</td>
22-
<td>34</td>
23-
</tr>
24-
<tr>
25-
<td>Item #3</td>
26-
<td>$0.15</td>
27-
<td>1670</td>
28-
</tr>
29-
</tbody>
30-
</table>
14+
<tbody>
15+
<tr>
16+
<td>Item #1</td>
17+
<td class="text-right">$10.11</td>
18+
<td class="text-right">101</td>
19+
</tr>
20+
<tr>
21+
<td>Item #2</td>
22+
<td class="text-right">$8.88</td>
23+
<td class="text-right">34</td>
24+
</tr>
25+
<tr>
26+
<td>Item #3</td>
27+
<td class="text-right">$0.15</td>
28+
<td class="text-right">1670</td>
29+
</tr>
30+
</tbody>
31+
</table>
32+
</div>
3133
</div>
3234
</template>
3335

@@ -37,11 +39,11 @@ export default {
3739
return {
3840
styles: [
3941
'',
40-
'inner-delimiter',
4142
'bordered',
43+
'row-delimiter',
44+
'cell-delimiter',
4245
'striped',
4346
'highlight',
44-
'centered',
4547
'compact'
4648
]
4749
}

‎src/css-components/html-table/html-table.ios.styl‎

Lines changed: 60 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,76 @@
1-
$table-border ?= 1px solid #d0d0d0
2-
$table-head-border ?= 2px solid #d0d0d0
1+
$table-font-size ?= .8rem
32
$table-highlight-color ?= #f2f2f2
3+
$table-color ?= $grey-8
44

5-
table
6-
border-collapse collapse
7-
border-spacing 0
8-
display table
5+
table.quasar-table
6+
position relative
97
border 0
10-
width 100%
8+
border-collapse collapse
9+
font-size $table-font-size
10+
background-color white
11+
color $table-color
1112

12-
&.bordered
13-
border $table-border
13+
&.bordered, &.cell-delimiter
14+
border 1px solid rgba(0, 0, 0, .12)
15+
&.cell-delimiter
1416
th, td
15-
border-right $table-border
16-
17-
&.inner-delimiter, &.bordered
17+
border-right 1px solid rgba(0, 0, 0, .12)
18+
&.row-delimiter, &.cell-delimiter
1819
tr
1920
border-bottom $table-border
20-
21-
thead
22-
border-bottom $table-head-border
23-
24-
td, th
25-
padding 0
26-
border 0
27-
padding 15px 5px
28-
display table-cell
29-
text-align left
30-
vertical-align middle
31-
32-
&.compact td
33-
padding 5px
34-
35-
&.centered
3621
th, td
37-
text-align center
22+
border-bottom 1px solid rgba(0, 0, 0, .12)
3823

3924
&.striped
40-
> tbody > tr
25+
tbody tr
4126
&:nth-child(odd)
4227
background $table-highlight-color
43-
> td
28+
td
4429
border-radius 0
30+
th
31+
border-bottom 2px solid rgba(0, 0, 0, .12)
32+
33+
thead
34+
th
35+
padding 12px 18px
36+
position relative
37+
vertical-align bottom
38+
text-overflow ellipsis
39+
font-weight 700
40+
line-height 24px
41+
letter-spacing 0
42+
height 48px
43+
font-size 12px
44+
color rgba(0, 0, 0, .54)
45+
text-align left
46+
&:first-of-type
47+
padding-left 24px
48+
&:last-of-type
49+
padding-right 24px
50+
tbody
51+
tr
52+
position relative
53+
height 48px
54+
td
55+
position relative
56+
height 48px
57+
padding 12px 18px
58+
vertical-align middle
59+
text-align left
60+
&:first-of-type
61+
padding-left 24px
62+
&:last-of-type
63+
padding-right 24px
64+
65+
&.compact
66+
th
67+
padding-left 5px
68+
padding-right 5px
69+
td
70+
padding 5px
4571

46-
body.desktop table.highlight
47-
> tbody > tr, th
48-
transition background .25s ease
72+
body.desktop table.quasar-table.highlight
73+
tbody tr, th
74+
transition all .28s ease-in
4975
&:hover
5076
background darken($table-highlight-color, 5%) !important

‎src/css-components/html-table/html-table.mat.styl‎

Lines changed: 58 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,74 @@
1-
$table-border ?= 1px solid #d0d0d0
2-
$table-head-border ?= 2px solid #d0d0d0
1+
$table-font-size ?= .8rem
32
$table-highlight-color ?= #f2f2f2
3+
$table-color ?= $grey-8
44

5-
table
6-
border-collapse collapse
7-
border-spacing 0
8-
display table
5+
table.quasar-table
6+
position relative
97
border 0
10-
width 100%
8+
border-collapse collapse
9+
font-size $table-font-size
10+
background-color white
11+
color $table-color
1112

12-
&.bordered
13-
border $table-border
13+
&.bordered, &.cell-delimiter
14+
border 1px solid rgba(0, 0, 0, .12)
15+
&.cell-delimiter
1416
th, td
15-
border-right $table-border
16-
17-
&.inner-delimiter, &.bordered
17+
border-right 1px solid rgba(0, 0, 0, .12)
18+
&.row-delimiter, &.cell-delimiter
1819
tr
1920
border-bottom $table-border
20-
21-
thead
22-
border-bottom $table-head-border
23-
24-
td, th
25-
padding 0
26-
border 0
27-
padding 15px 5px
28-
display table-cell
29-
text-align left
30-
vertical-align middle
31-
32-
&.compact td
33-
padding 5px
34-
35-
&.centered
3621
th, td
37-
text-align center
22+
border-bottom 1px solid rgba(0, 0, 0, .12)
3823

3924
&.striped
40-
> tbody > tr
25+
tbody tr
4126
&:nth-child(odd)
4227
background $table-highlight-color
43-
> td
28+
td
4429
border-radius 0
30+
th
31+
border-bottom 2px solid rgba(0, 0, 0, .12)
32+
33+
thead
34+
th
35+
padding 12px 18px
36+
position relative
37+
vertical-align bottom
38+
text-overflow ellipsis
39+
font-weight 700
40+
line-height 24px
41+
letter-spacing 0
42+
height 48px
43+
font-size 12px
44+
color rgba(0, 0, 0, .54)
45+
&:first-of-type
46+
padding-left 24px
47+
&:last-of-type
48+
padding-right 24px
49+
tbody
50+
tr
51+
position relative
52+
height 48px
53+
td
54+
position relative
55+
height 48px
56+
padding 12px 18px
57+
vertical-align middle
58+
&:first-of-type
59+
padding-left 24px
60+
&:last-of-type
61+
padding-right 24px
62+
63+
&.compact
64+
th
65+
padding-left 5px
66+
padding-right 5px
67+
td
68+
padding 5px
4569

46-
body.desktop table.highlight
47-
> tbody > tr, th
48-
transition background .25s ease
70+
body.desktop table.quasar-table.highlight
71+
tbody tr, th
72+
transition all .28s ease-in
4973
&:hover
5074
background darken($table-highlight-color, 5%) !important

‎src/vue-components/grid/grid-table.vue‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -58,22 +58,22 @@
5858
</div>
5959
</div>
6060

61-
<table class="striped highlight bordered compact">
61+
<table class="quasar-table striped highlight bordered compact">
6262
<thead>
6363
<tr>
64-
<th v-if="selectionMode !== 'none'" style="width: 30px text-align: center">
65-
&nbsp
66-
</th>
67-
<th
68-
v-for="column in columns"
69-
v-show="!column.hidden"
70-
@click="sortBy(column.field)"
71-
:class="{'sortable-column': sortable}"
72-
>
73-
{{{column.label}}}
74-
<i v-show="sortField === column.field && sortOrder === -1">keyboard_arrow_down</i>
75-
<i v-show="sortField === column.field && sortOrder === 1">keyboard_arrow_up</i>
76-
</th>
64+
<th v-if="selectionMode !== 'none'" style="width: 30px text-align: center">
65+
&nbsp
66+
</th>
67+
<th
68+
v-for="column in columns"
69+
v-show="!column.hidden"
70+
@click="sortBy(column.field)"
71+
:class="{'sortable-column': sortable}"
72+
>
73+
{{{column.label}}}
74+
<i v-show="sortField === column.field && sortOrder === -1">keyboard_arrow_down</i>
75+
<i v-show="sortField === column.field && sortOrder === 1">keyboard_arrow_up</i>
76+
</th>
7777
</tr>
7878
</thead>
7979

‎src/vue-components/grid/grid.ios.styl‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
.quasar-grid-table
2+
font-size $table-font-size
3+
color $table-color
24
th
35
user-select none
46
.sortable-column

‎src/vue-components/grid/grid.mat.styl‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
.quasar-grid-table
2+
font-size $table-font-size
3+
color $table-color
24
th
35
user-select none
46
.sortable-column

‎src/vue-components/grid/grid.vue‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<quasar-grid-table
33
v-ref:table
44
class="quasar-grid"
5+
:title="title"
56
:data="data | gridShowSelected showOnlySelected selectionMode singleSelection | filterBy searchQuery"
67
:columns="columns"
78
:rows-per-page="rowsPerPage"
@@ -16,6 +17,7 @@
1617
<script>
1718
export default {
1819
props: {
20+
title: String,
1921
columns: {
2022
type: Array,
2123
required: true

‎src/vue-components/pagination/pagination.ios.styl‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
.quasar-pagination button
2+
padding 0 5px !important

‎src/vue-components/pagination/pagination.mat.styl‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
.quasar-pagination button
2+
padding 0 5px !important

0 commit comments

Comments
 (0)