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): allow custom attributes in table td cell #1193

merged 1 commit into from Oct 12, 2017


None yet
3 participants

jon-walton commented Oct 12, 2017


This pull request allows us to add additional attributes to a <td> cell in <b-table>

We are converting a plain html table to use <b-table>. It's responsive, such that on small screens, the table header is hidden and we use the following css for the td cells

    td {
      display: block; border:none; padding:6px 10px;

      &:first-child {padding-top: .5em;}
      &:last-child {padding-bottom: .5em; border-bottom:1px solid #e8e8e8; padding-bottom:15px;}

      &:before {
        content: attr(data-th)": ";
        font-weight: bold;
        width: 6.5em; // magic number :( adjust according to your own content
        display: inline-block;

        @include media-breakpoint-up(md) {
          display: none;

essentially, placing the header text to the left of the cell and turning the table into a vertical list. it works quite well for our use case.

with <b-table>, I need to pass in a data-th attribute to the <td> node. I'm doing this using a new property on the fields object.

I'm not sure if this is how you would prefer to handle it, please let me know your thoughts (perhaps this could be extended to th and tr).



This comment has been minimized.

codecov-io commented Oct 12, 2017

Codecov Report

Merging #1193 into dev will increase coverage by 0.2%.
The diff coverage is n/a.

Impacted file tree graph

@@            Coverage Diff            @@
##              dev    #1193     +/-   ##
+ Coverage   32.86%   33.07%   +0.2%     
  Files         109      109             
  Lines        2866     2866             
  Branches      891      891             
+ Hits          942      948      +6     
+ Misses       1547     1541      -6     
  Partials      377      377
Impacted Files Coverage Δ
lib/components/table.vue 68.94% <ø> (ø) ⬆️
lib/components/form-input.vue 42.85% <0%> (+3.57%) ⬆️
lib/components/button.js 76.92% <0%> (+3.84%) ⬆️
lib/components/form-group.vue 76.66% <0%> (+6.66%) ⬆️
lib/components/embed.js 100% <0%> (+33.33%) ⬆️
lib/components/button-group.js 100% <0%> (+33.33%) ⬆️

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 69ed057...49a2ff0. Read the comment docs.

@tmorehouse tmorehouse changed the title from allow custom attributes in table td cell to feat(table): allow custom attributes in table td cell Oct 12, 2017

@tmorehouse tmorehouse self-requested a review Oct 12, 2017

@tmorehouse tmorehouse merged commit 485adbf into bootstrap-vue:dev Oct 12, 2017

1 check passed

ci/circleci Your tests passed on CircleCI!
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment