New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(table): add responsive stacked table option #1407

Merged
merged 18 commits into from Nov 27, 2017

Conversation

Projects
None yet
2 participants
@tmorehouse
Member

tmorehouse commented Nov 25, 2017

This adds a new prop stacked, which allows the table to render in a visually stacked format based on breakpoint. (custom CSS assumes standard bootstrap breakpoint values).

If no value is passed to stacked, the table will always be rendered as stacked.

If stacked is set to a breakpoint of sm, md, lg, or xl, then the table will only appear stacked at view ports below the specified breakpoint.

Example stacked table:
image

When visually stacked, the table thead and tfoot will not be shown. Cells will be prefixed with the fields' label (not the scoped HEAD slot). Because of this, it is not possible to click the "headings" to sort the columns. Users however, can provide an external control (such as b-form-select) to control the sorting and sort direction (via b-table's sort-by and sort-desc syncable props).

Also optimized the thead and tfoot rendering via the user of a factory function, which reduces the code-base slightly.

Our custom CSS has increased to 8.5kbytes, due to the CSS required for each stacking breakpoint unfortunately,

feat(table): add responsive stacked table option
This adds a new prop `stacked`, which allows the table to render in a visually stacked format based on breakpoint. (CSS assumes standard bootstrap breakpoints).

If no value is passed to `stacked`, the table will always be rendered as stacked.

If `stacked` is set to a breakpoint of `sm`, `md`, `lg`, or `xl`, then the table will only appear stacked at view ports below the specified breakpoint.

When visually stacked, the table thead and tfoot will not be shown.  Cells will be prefixed with the fields label (not the scoped HEAD slot). Because of this, it is not possible to click the "headings" to sort the columns.  Users however, can provide an external control (such as b-form-select) to control the sorting and sort direction (via b-table's `sort-by` and `sort-desc` syncable props).

tmorehouse added some commits Nov 25, 2017

@codecov-io

This comment has been minimized.

codecov-io commented Nov 25, 2017

Codecov Report

Merging #1407 into dev will decrease coverage by 0.92%.
The diff coverage is 68.04%.

Impacted file tree graph

@@            Coverage Diff             @@
##              dev    #1407      +/-   ##
==========================================
- Coverage   42.45%   41.53%   -0.93%     
==========================================
  Files         130      131       +1     
  Lines        2923     2875      -48     
  Branches      907      889      -18     
==========================================
- Hits         1241     1194      -47     
+ Misses       1281     1255      -26     
- Partials      401      426      +25
Impacted Files Coverage Δ
src/components/table/table.vue 100% <100%> (+27.38%) ⬆️
src/components/table/_table.js 67.92% <67.92%> (ø)

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 8a6c7d8...45e4bdb. Read the comment docs.

tmorehouse added some commits Nov 25, 2017

@tmorehouse tmorehouse changed the title from [WIP] feat(table): add responsive stacked table option to feat(table): add responsive stacked table option Nov 26, 2017

@tmorehouse tmorehouse removed the Status: WIP label Nov 26, 2017

@tmorehouse tmorehouse requested review from pi0, alexsasharegan and mosinve Nov 26, 2017

tmorehouse added some commits Nov 26, 2017

add props for adding classes to thead, tbody and tfoot
new props:
- `thead-class` Class(es) added to `<thead>`
- `thead-tr-class` Class(es) added to  `<tr>` element inside `<thead>`
- `tbody-class` Class(es) added to `<tbody>`
- `tbody-tr-class` Class(es) added to all `<tr>` elements inside `<tbody>`
- `tfoot-class` Class(es) added to `<tfoot>`
- `tbody-tr-class` Class(es) added to `<tr>` element inside `<tfoot>`
@tmorehouse

This comment has been minimized.

Member

tmorehouse commented Nov 27, 2017

Added new props to allow user to add classes to thead, tfoot, tbody, as well as the tr elements.

Addresses issue #1405

tmorehouse added some commits Nov 27, 2017

@tmorehouse

This comment has been minimized.

Member

tmorehouse commented Nov 27, 2017

Move script contents into external file so that code transpiles in /es buld dir

@tmorehouse tmorehouse merged commit df23115 into dev Nov 27, 2017

2 checks passed

License Compliance License checks passed.
Details
ci/circleci Your tests passed on CircleCI!
Details

@tmorehouse tmorehouse deleted the table/stacked branch Nov 27, 2017

pi0 added a commit that referenced this pull request Nov 29, 2017

feat(table): add responsive stacked table option (#1407)
* feat(table): add responsive stacked table option

This adds a new prop `stacked`, which allows the table to render in a visually stacked format based on breakpoint. (CSS assumes standard bootstrap breakpoints).

If no value is passed to `stacked`, the table will always be rendered as stacked.

If `stacked` is set to a breakpoint of `sm`, `md`, `lg`, or `xl`, then the table will only appear stacked at view ports below the specified breakpoint.

When visually stacked, the table thead and tfoot will not be shown.  Cells will be prefixed with the fields label (not the scoped HEAD slot). Because of this, it is not possible to click the "headings" to sort the columns.  Users however, can provide an external control (such as b-form-select) to control the sorting and sort direction (via b-table's `sort-by` and `sort-desc` syncable props).

* Update table.vue

* Update table.vue

* Update table.vue

* Update table.vue

* Update table.vue

* Update table.vue

* Update README.md

* Update README.md

* Update README.md

* Update README.md

* add props for adding classes to thead, tbody and tfoot

new props:
- `thead-class` Class(es) added to `<thead>`
- `thead-tr-class` Class(es) added to  `<tr>` element inside `<thead>`
- `tbody-class` Class(es) added to `<tbody>`
- `tbody-tr-class` Class(es) added to all `<tr>` elements inside `<tbody>`
- `tfoot-class` Class(es) added to `<tfoot>`
- `tbody-tr-class` Class(es) added to `<tr>` element inside `<tfoot>`

* ESLint

* Update README.md

* Create _table.js

* Update table.vue

* ESLint
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment