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
Closed

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

Hiws opened this issue Apr 4, 2019 · 5 comments

Comments

@Hiws
Copy link
Member

@Hiws Hiws 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
Copy link
Member

@tmorehouse tmorehouse 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
Copy link
Member

@tmorehouse tmorehouse 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;
}

@jacobmllr95 jacobmllr95 changed the title [bug] b-table _rowVariant takes priority over selectVariant <b-table> _rowVariant takes priority over selectVariant Apr 8, 2019
@Hiws
Copy link
Member Author

@Hiws Hiws 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
Copy link
Member

@tmorehouse tmorehouse 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
Copy link
Member

@tmorehouse tmorehouse 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
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
2 participants