Skip to content
This repository has been archived by the owner on Nov 10, 2020. It is now read-only.

feat(table component): columns resizing, reordering, sorting and rows selecting #7

Open
wants to merge 29 commits into
base: master
Choose a base branch
from
Open

feat(table component): columns resizing, reordering, sorting and rows selecting #7

Show file tree
Hide file tree
Changes from 16 commits
Commits
Show all changes
29 commits
Select commit Hold shift + click to select a range
3cd5495
feat(table component): wip: columns sort and ordering implementation
dmitryueno Sep 9, 2020
7b82c08
feat(table component): columns ordering and sorting features implemen…
dmitryueno Sep 9, 2020
f1cdeba
feat(table component): wip: change columns width feature
dmitryueno Sep 10, 2020
a95c7a4
chore(release): 1.3.1
Sep 14, 2020
f9193a1
fix(gux-table): resizeObserver not present in spec tests
daragh-king-genesys Sep 15, 2020
524d98d
feat(gux-pagination): added expanded layout
daragh-king-genesys Sep 7, 2020
626fa49
feat(table component): resizable columns functionality implementation
dmitryueno Sep 15, 2020
875e58b
Merge pull request #34 from MyPureCloud/NO-JIRA_broken-table-test
daragh-king-genesys Sep 15, 2020
4c562f9
chore(release): 1.3.2
Sep 15, 2020
b307b0f
chore(translations): translation updates
ININ-TransifexAutomation Sep 16, 2020
cd1f8bd
Merge pull request #39 from MyPureCloud/TPA_20200916_101535
daragh-king-genesys Sep 16, 2020
beb40aa
Merge pull request #24 from MyPureCloud/COMUI-245-pagination-expanded
daragh-king-genesys Sep 16, 2020
5e99a60
feat(table component): rows selection funtionality implementatio
dmitryueno Sep 16, 2020
7f44705
feat(table component): row selection event implementation
dmitryueno Sep 16, 2020
0159220
Merge branch 'master' of https://github.com/MyPureCloud/genesys-webco…
dmitryueno Sep 16, 2020
0f6cf24
feat(table component): new tests for table component
dmitryueno Sep 16, 2020
dcc1c13
fix(gux-dropdown): better handle asynchronously loaded options
MattCheely Sep 16, 2020
eec3866
feat(color-styles): exporting common color variables
daragh-king-genesys Sep 9, 2020
3a74630
chore(release): 1.4.0
Sep 16, 2020
945a959
fix(table component): test code removed
dmitryueno Sep 17, 2020
e91d870
fix(table component): fix typo
dmitryueno Sep 17, 2020
ca2b392
Merge pull request #29 from MyPureCloud/COMUI-194_color-styles
MattCheely Sep 17, 2020
40fcb0c
fix(doc-site): fix the sort order of components
MattCheely Sep 17, 2020
acfddc9
Merge pull request #40 from MyPureCloud/comui-255-async-options
MattCheely Sep 17, 2020
236861e
chore(release): 1.5.0
Sep 17, 2020
914f104
Merge pull request #45 from MyPureCloud/fix-menu-sorting
MattCheely Sep 18, 2020
417e424
chore(release): 1.5.1
Sep 18, 2020
0e82f1a
refactor(table component): refactor logic for column resizing and sor…
dmitryueno Sep 21, 2020
a8094f9
fix(table component): tests fixed to use new tag name
dmitryueno Sep 21, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,15 @@

All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.

### [1.3.2](http://inindca///compare/v1.3.1...v1.3.2) (2020-09-15)


### Bug Fixes

* **gux-table:** resizeObserver not present in spec tests ([f9193a1](http://inindca///commit/f9193a1e542c87b06b8f64ca2ad83b3784fd9d43))

### [1.3.1](http://inindca///compare/v1.3.0...v1.3.1) (2020-09-14)

## [1.3.0](http://inindca///compare/v1.2.0...v1.3.0) (2020-09-11)


Expand Down
10 changes: 8 additions & 2 deletions docs/src/components-spec.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -327,9 +327,15 @@
"attributes": {
"compact": "checkbox",
"object-table": "checkbox",
"epmty-message": "text"
"epmty-message": "text",
"columns-order": "text",
"resizable-columns": "checkbox",
"selectable-rows": "checkbox"
},
"events": {}
"events": {
"sortChanged": "Fired when sorting of the table column is changed",
"rowsSelectionChanged": "Fired when table row was selected/unselected"
}
},
"typography": {
"attributes": {},
Expand Down
3 changes: 1 addition & 2 deletions docs/webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,8 +86,7 @@ module.exports = {
devServer: {
compress: true,
port: 8080,
serveIndex: true,
disableHostCheck: true
serveIndex: true
}
};

Expand Down
2 changes: 1 addition & 1 deletion package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@genesys/common-webcomponents",
"version": "1.3.0",
"version": "1.3.2",
"description": "Common webcomponents",
"main": "dist/stencil-wrapper.js",
"types": "dist/types/index.d.ts",
Expand Down
166 changes: 163 additions & 3 deletions src/components/beta/gux-table/example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@ <h1>Data table</h1>
<table slot="data">
<thead>
<tr>
<th data-column-name="first-name" data-sortable>First name</th>
<th data-column-name="first-name">First name</th>
<th data-column-name="last-name">Last name</th>
<th data-column-name="age" data-cell-numeric data-sortable>Age</th>
<th data-column-name="age" data-cell-numeric>Age</th>
<th data-column-name="action" data-cell-action>Action</th>
</tr>
</thead>
Expand Down Expand Up @@ -244,4 +244,164 @@ <h1>Data table with scroll</h1>
</tr>
</tbody>
</table>
</gux-table-beta>
</gux-table-beta>

<h1>Data table with reordered columns</h1>
<gux-table-beta columns-order="age last-name first-name">
<table slot="data">
<thead>
<tr>
<th data-column-name="first-name">First name</th>
<th data-column-name="last-name">Last name</th>
<th data-column-name="age" data-cell-numeric>Age</th>
<th data-column-name="action" data-cell-action>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td data-cell-numeric>25</td>
<td data-cell-action>Delete</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
<td data-cell-numeric>23</td>
<td data-cell-action>Delete</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
<td data-cell-numeric>21</td>
<td data-cell-action>Delete</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
<td data-cell-numeric>23</td>
<td data-cell-action>Delete</td>
</tr>
</tbody>
</table>
</gux-table-beta>

<h1>Data table with sortable columns</h1>
<gux-table-beta>
<table slot="data">
<thead>
<tr>
<th data-column-name="first-name" data-sortable>First name</th>
<th data-column-name="last-name" data-sortable>Last name</th>
<th data-column-name="age" data-sortable data-cell-numeric>Age</th>
<th data-column-name="action" data-cell-action>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td data-cell-numeric>25</td>
<td data-cell-action>Delete</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
<td data-cell-numeric>23</td>
<td data-cell-action>Delete</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
<td data-cell-numeric>21</td>
<td data-cell-action>Delete</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
<td data-cell-numeric>23</td>
<td data-cell-action>Delete</td>
</tr>
</tbody>
</table>
</gux-table-beta>

<h1>Data table with resizable columns</h1>
<gux-table-beta resizable-columns>
<table slot="data">
<thead>
<tr>
<th data-column-name="first-name">First name</th>
<th data-column-name="last-name">Last name</th>
<th data-column-name="age" data-cell-numeric>Age</th>
<th data-column-name="action" data-cell-action>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td data-cell-numeric>25</td>
<td data-cell-action>Delete</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
<td data-cell-numeric>23</td>
<td data-cell-action>Delete</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
<td data-cell-numeric>21</td>
<td data-cell-action>Delete</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
<td data-cell-numeric>23</td>
<td data-cell-action>Delete</td>
</tr>
</tbody>
</table>
</gux-table-beta>

<h1>Object table with rows selection</h1>
<gux-table-beta object-table selectable-rows>
<table slot="data">
<thead>
<tr>
<th data-column-name="first-name">First name</th>
<th data-column-name="last-name">Last name</th>
<th data-column-name="age" data-cell-numeric>Age</th>
<th data-column-name="action" data-cell-action>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td data-cell-numeric>25</td>
<td data-cell-action>Delete</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
<td data-cell-numeric>23</td>
<td data-cell-action>Delete</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
<td data-cell-numeric>21</td>
<td data-cell-action>Delete</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
<td data-cell-numeric>23</td>
<td data-cell-action>Delete</td>
</tr>
</tbody>
</table>
</gux-table-beta>
119 changes: 115 additions & 4 deletions src/components/beta/gux-table/gux-table.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
@gux-table-row-hover: rgba(117, 168, 255, .24);
@gux-table-scroll-divider: rgba(34, 37, 41, 0.1);
@gux-table-scroll-thumb: #B5B6B7;
@gux-table-row-selection: rgba(117, 168, 255, 0.24);

gux-table-beta {
display: block;
Expand Down Expand Up @@ -39,6 +40,28 @@ gux-table-beta {
padding-left: 24px;
text-align: right;
}

th[data-cell-row-selection],
td[data-cell-row-selection] {
padding-left: 12px;
padding-right: 8px;
width: 16px;

gux-checkbox {
height: 25px;
width: 16px;

.gux-checked:after,
.gux-unchecked:after {
left: 0px;
}

.gux-checked:before,
.gux-unchecked:before {
left: 2px;
}
}
}

th:last-child, td:last-child {
border-right-width: 0px;
Expand Down Expand Up @@ -123,14 +146,91 @@ gux-table-beta {
tr:hover {
background: @gux-table-row-hover;
}

tr[data-selected-row] {
td {
background: @gux-table-row-selection;
}
}
}
}

table {
th {
position: sticky;
top: 0;
background: @gux-off-white;
thead {
th {
position: sticky;
top: 0;
background: @gux-off-white;

gux-icon {
display: none;
position: absolute;
right: 6px;
top: 13px;
}

.gux-column-sort-highlight {
background: @gux-blue;
bottom: 0;
display: none;
height: 4px;
left: 0px;
position: absolute;
width: 100%;
}

.gux-column-resize {
cursor: col-resize;
height: 100%;
position: absolute;
right: -1px;
top: 0;
width: 3px;
z-index: 99;
}
}

th:hover {
.gux-column-sort-arrow-down {
color: @gux-icons;
display: block;
}
}

th[data-cell-action],
th[data-cell-numeric] {
gux-icon {
left: 6px;
}
}

th[data-sort-direction] {
.gux-column-sort-highlight {
display: block;
}
}

th[data-sort-direction="asc"] {
.gux-column-sort-arrow-down {
color: @gux-grey-2;
display: block;
}

.gux-column-sort-arrow-up {
display: none !important;
}
}

th[data-sort-direction="desc"] {
.gux-column-sort-arrow-up {
color: @gux-grey-2;
display: block;
}

.gux-column-sort-arrow-down {
display: none !important;
}
}
}

tbody {
Expand Down Expand Up @@ -165,6 +265,17 @@ gux-table-beta {
}
}
}

&.column-resizing-hover,
&.column-resizing {
cursor: col-resize;

.gux-column-sort-arrow-down,
.gux-column-sort-arrow-up,
.gux-column-sort-highlight {
display: none !important;
}
}
}

.empty-table {
Expand Down
Loading