Solvedbootstrap vue How to use event row-clicked <b-table>.

Hi guys, I'm trying to use event row-clicked to fill some props when click on a b-table row.
Tried to find an example on google but without success.
How can I use this event?
I'm currently using a button for this, but I want to change it.

<b-table bordered striped hover :items="environments" :fields="fields" :current-page="currentPage" :per-page="perPage" :filter="filter"> <template slot="actions" scope="environment"> <b-btn size="sm" @click="log(environment.item)">Details</b-btn> </template> </b-table>

Is it possible use row-clicked or even double click for that? Thanks!

19 Answers

βœ”οΈAccepted Answer

<b-table bordered striped hover 
         :items="environments"
         :fields="fields"
         :current-page="currentPage"
         :per-page="perPage"
         :filter="filter"
         v-model="shownItems"
         @row-clicked="myRowClickHandler"
>
  <template slot="actions" scope="environment">
    <b-btn size="sm" @click="log(environment.item)">Details</b-btn>
  </template>
</b-table>
methods: {
  myRowClickHandler(record, index) {
    // 'record' will be the row data from items
    // `index` will be the visible row number (available in the v-model 'shownItems')
    log(record); // This will be the item data for the row
  }
}

Other Answers:

Strange that an example of using row-clicked isn't in the docs...

https://bootstrap-vue.js.org/docs/components/table/

@tmorehouse would you accept a PR?

The row clicked handler is passed a copy of the row's data (item) as the first argument to the handler.

You can then set the value of item._showDetails to true:

  // To toggle:
  this.$set(item, '_showDetails', !item._showDetails)
  // or to just show:
  this.$set(item, '_showDetails', true)
  // or to just hide:
  this.$set(item, '_showDetails', false)

Using this.set(...) ensures that Vue's reactivity will detect the change (in case the _showDetails property doesn't exist in the item)

Adding dblclick support to rows might also be a handy feature for us to add to b-table

@andthomas I am not sure I got your example to @hrakotom question? How exactly to we use the row.toggleDetails function instead of our handler.
example:

<b-table
    @row-clicked="myHandler"  // how instead of my Handler can I use the row.toggleDetails?
>
</b-table>

All I want is to show row details when I click the row and not with a button.

Related Issues:

174
bootstrap vue Dynamic property for v-b-toggle
v-b-toggle does accept a dynamic value to specify a single target ID Not do not include the # as it ...
111
bootstrap vue How to hide OK or Cancel buttons on Modal?
Add property in b-modal component hide-footer=true Hi In the docs it says: You can customize the siz...
70
bootstrap vue How to use event row-clicked <b-table>.
Hi guys I'm trying to use event row-clicked to fill some props when click on a b-table row Tried to ...
16
bootstrap vue Babel Errors in nuxt generate 2.14
@amdp BootstrapVue Usage BootstrapVue icons ARE not automatically installed when using BootstrapVue ...
84
eslint plugin jsx a11y Form label must have associated control on compliant markup
@skirankumar7 I ran into this issue as well here's what my eslintrc.json looks like after I got it w...
79
chakra ui Upgrading to v1 has broken fonts in Storybook
Sure @hutber package.json .storybook/main.js The preview.js file it is the same wrapping the ChakraP...
48
chakra ui Select component
I'm not sure what the progress on this is but I wanted to share my wrapper for react-select's multi ...
37
eslint plugin jsx a11y First line of all JSX / JS files gives lint error 'jsx-a11y/img-has-alt' was not found
Thanks @ljharb I downgraded the dependency down to eslint-plugin-jsx-a11y@^4.0.0 ...
36
chakra ui Warning: Prop id did not match. Server: "popover-trigger-33" Client: "popover-trigger-6"
Mine gone when I added id & isLazy to the Menu Hi After upgrade to @chakra-ui@1.1.4 my application w...
34
chakra ui [Recipe] Next.js components & Chakra
For anyone like me winding up here trying to figure out how to get next links to work with chakra me...
22
chakra ui [ColorModeProvider, ThemeProvider] Changing default dark mode colors
Here's how I was able to set component level defaults depending on color mode I didn't see this docu...
20
eslint plugin jsx a11y Is no-onchange still a relevant rule?
Also if using only onBlur without onChange then React prints out a warning in the Browser console: W...
17
chakra ui Framer Motion v4 breaks Chakra
Same here just installed Chakra in a new Nextjs project and got the same error Downgraded framer-mot...
16
chakra ui Add support for flex gap
Going to re-open this since we now have support in all major browsers https://caniuse.com/flexbox-ga...
16
eslint plugin jsx a11y Configuration for rule "jsx-a11y/anchor-has-content" is invalid: Value "[object Object]" no (or more than one) schemas match.
Also if you're using Atom it has a bug - you have to restart it after any change to node_modules. ...
15
chakra ui Moving beyond one dimension: adding depth to the Chakra documentation
I've been adopting and promoting Chakra at work having been using < 1 on personal projects My way of...
13
chakra ui [Modal] blockScrollOnMount fails on iOS devices
I'm getting this error logged to the console for me as well but not even using an ios device just us...
12
grommet React Router and Anchor do not work together
I'm using typescript and customize the Anchor this way: Usage: And it works! -- UPDATE: Omit colorPr...
12
eslint plugin jsx a11y Flow: identifier `ESLintContext`. Could not resolve name
There are a lot of modules from npm which contain useful Flow types So I don't think it's safe to sa...
12
pa11y Untangle HTML CodeSniffer and investigate supporting different runners
I need to make a decision about whether to bundle the aXe runner with Pa11y If we do this ...
11
chakra ui Integrate with Capsize
Update 2021-12-15: I've created a package chakra-capsize to integrate with capsize! See my comment b...
9
chakra ui Migrate to TypeScript
Hey @segunadebayo the ts-dev will be impossible to easily merge into master if we don't start gradua...
9
grommet Using Anchor with Link from react-router
I'm just trying/learning Grommet and quickly ran into this issue as well with React Router v4 ...
25
darkreader Export a CSS file with the current settings
Hello! In the next update of Dark Reader 4.9.16 you can export it to CSS File πŸŽ‰ This can trough the...
15
osmnx ValueError: Geometry must be a shapely Polygon or MultiPolygon
OSMnx is behaving correctly The API returns a point for the query 'Baltimore Maryland ...
6
darkreader [BUG] Error in event handler: TypeError: Cannot read property 'l' of null
Their you go! Now you should wait on google to review it and push the update to users Thank you for ...
5
nvda Consult: space/enter keyEvent is swallowed by NVDA
@danzen I tried https://zimjs.com/accessibility/radiobuttons.html So far I'm not seeing a problem wi...
109
sweetalert2 Text input not clickable when bootstrap modal is open
Excellent thanks for your answer Looking for the event listener I found a solution in bootstrap: htt...
16
sweetalert2 Sweet Alert 2 scrolling to top of page after firing with magnific popup ajax
I was also experiencing this issue -- I'm not using Foundation Hey Guys Thanks for your hard work wi...
7
react autosuggest _this3.input.focus is not a function
@moroshko is there any way to do the same trick with material-ui/TextField? Thanks. ...
6
sweetalert2 support server side rendering
This works for me: Just be sure to null-check swal everywhere you use it or create a simple wrapper ...
4
react autosuggest configure debounce delay
To answer my own question I was able to use lodash to debounce: Something like that should work for ...
4
sweetalert2 Built files ("./dist") in version-control
t4t5/sweetalert#748 does not apply to this repo Built files are useless redundant noise in the git d...
275
ngx bootstrap fix(tooltip): tooltip flickering when hover the mouse on the border on the tooltip position
Add pointer-events: none; to the tooltip css problem solved! .tooltip { pointer-events: none; } ...
147
ng bootstrap No provider for NgbActiveModal! => "Components as content"
try to provide NgbActiveModal on app.module Bug description: When trying to implement the Modal usin...
101
bootstrap Navbar .sticky-top doesn't work
My setup: Bootstrap@4.0.0-beta.2 macOS Sierra - Version 10.12.6 Google Chrome - Version 62.0.3202.62...
83
ngx bootstrap How to pass data to modal ngx-bootstrap and receive return data ?
here is how you send information back to parent component ( calling component) create a EventEmitter...
73
react bootstrap Fix arbitrary prop passthrough to DOM nodes.
Wait how are library component authors supposed to fix this? Are we supposed to apply the whitelist ...
70
bootstrap Responsive Card Decks
I've managed to find a way of having cards in the responsive system while having equal heights just ...
54
bootstrap Bootstrap dropdown require Popper.js (https://popper.js.org)
For laravel projects using laravel mix window.Popper = require('popper.js').default; does the trick ...
54
bootstrap table-responsive class does not take full width
simple solution use a wrapping <div> with the table-responsive class. This was previously reported i...
51
ngx bootstrap Auto open modal from components
Use ngAfterViewInit instead of ngOnInit The ViewChildis still undefined when the component is initia...
48
reactstrap Reactstrap and React-router 4.0.0-beta.6 - active <NavLink>
The simplest answer is that you can't use reactstrap navlink active prop when passing in react-route...
48
bootstrap v4.0.0-alpha.6 - Activating tooltips breaks modals (stuck "transitioning")
Had the same issue fixed by adding data-animation=false to my html elements. Operating systems and b...
44
AdminLTE Active menu item with multi level submenus
nice script but it is not valid where you took the class ul.level-1 from? πŸ˜„ AdminLTE doesn't use so...
40
ngx bootstrap BsModalService confirmation modal with yes and no buttons
A possible solution could be: confirmation-modal.component.html confirmation-modal.component.ts: ope...
36
ng bootstrap No animation for ng-bootstrap modal
You need to add animation css class to global styles and add NgbModalOptions Bug description: Bootst...
35
react bootstrap Click on MenuItem doesn't hide the dropdown menu?
Have encountered & addressed (as of react-bootstrap v0.30.7) w/ workaround by adding this in my onSe...
31
react bootstrap How to get the value of a FormControl input.
Form Control has a ref prop which allows us to use React Refs Sample Code : Hope this helps! ...
29
bootstrap Uncaught ReferenceError: Popper is not defined
It's because you included both bootstrap.min.js and bootstrap.bundle.min.js you should just include ...