Skip to content
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

<b-table> `_rowVariant` takes priority over `selectVariant` #3008

Closed
Hiws opened this issue Apr 4, 2019 · 5 comments

Comments

@Hiws
Copy link

commented Apr 4, 2019

Component:

Description:
If you have a selectable table and select a row with a rowVariant you wont be able to see the selectVariant making it bad user experience as the user will not be notified that the row was successfully selected.

The select variant should take priority over the row variant for a better user experience.

@tmorehouse

This comment has been minimized.

Copy link
Member

commented Apr 4, 2019

Another option would be to use a scoped item slot (on a virtual field column) to add an icon show selection state:

<template slot="selected" slot-scope="{ rowSelected }">
  <span v-if="rowSelected" aria-label="selected">
    <b aria-hidden="true">√</b>
  </span>
</template>
@tmorehouse

This comment has been minimized.

Copy link
Member

commented Apr 7, 2019

In this case, both variants are being applied to the row, and which ever one was defined last in the Bootstrap V4 SCSS will take precedence.

Another workaround would be to temporarily suppress the _rowVariant by setting it to an empty string, and when unselected restore the original _rowVariant.

Something else we could look into is providing a different type of feedback to signify that the row is selected (such as a border).

You can also target the selected rows (which have a class b-table-selected with custom CSS to define a row background color (applied to the TD's and TH's inside the row), and set selected-variant prop to a blank string. Your custom CSS would be defined after Bootstrap's CSS (typically), and would take precedence over any other variant applied to the row. ie.:

table.b-table-selectable > tbody > tr.b-table-row-selected > td,
table.b-table-selectable > tbody > tr.b-table-row-selected > th {
  background-color: cyan;
}
@jackmu95 jackmu95 changed the title [bug] b-table _rowVariant takes priority over selectVariant <b-table> `_rowVariant` takes priority over `selectVariant` Apr 8, 2019
@Hiws

This comment has been minimized.

Copy link
Author

commented Apr 16, 2019

Appreciate the workaround.
Just adding a small typo fix as you were targeting the wrong class on the tr's in the custom CSS example.

table.b-table-selectable > tbody > tr.b-table-row-selected > td,
table.b-table-selectable > tbody > tr.b-table-row-selected > th {
  background-color: cyan;
}
@tmorehouse

This comment has been minimized.

Copy link
Member

commented May 29, 2019

Fixed type typo my example above.

If you want to use bootstrap V4 colors, you can use their CSS :root variables:

table.b-table-selectable > tbody > tr.b-table-row-selected > td,
table.b-table-selectable > tbody > tr.b-table-row-selected > th {
  background-color: var(--info);
}

The list of the (default) Bootstrap root base color variables is (all variants are derived from these):

:root {
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #007bff;
    --secondary: #6c757d;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;
}
@tmorehouse tmorehouse closed this Jul 1, 2019
tmorehouse added a commit that referenced this issue Sep 19, 2019
… precedence over other row variants (addresses #3008) (#4127)
@tmorehouse

This comment has been minimized.

Copy link
Member

commented Sep 20, 2019

@Hiws v2.02 has tweaked the table row variant active so that it takes precedence over any other row/cell variant.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.