I want to create a dynamic bootstrap table that looks something like this:
https://examples.bootstrap-table.com/#welcome.html
Currently I am using this code to display my data from an array in the bootstrap table:
<b-table striped hover :items="shotlist_tab.shots"></b-table>
But I also want to add custom buttons on the side for each row (edit / delete).
Is there a way to customize the columns of a "b-table"? I haven't found anything yet.
You can use slots. You can read here about that.
If you provide some more code I can help you with that.
Also, one good example of using slots and collapse data inside the row.
Good luck!
Related
I'm using Vuetify (2.6.1) data tables and they work great.
I wonder if it is possible to customize the UI of a particular case:
-> when the v-data-table is in responsive into the mobile breakpoint.
The UI looks like this:
data table list on mobile - sort field highlighted
Is it possible, just in this case, to customize the select highlighted in red here ?
I tried to update the the global CSS but things are not clean because when an item is selected from the list there is a v-chip added:
data table list on mobile with sort selected
I would like the select to look like and behave just like in this case here highlighted in red:
vuetify documentation - select solo style
I searched on the documentation and API, stack overflow, vuetify github's and tried different ways but I haven't found a way on how to properly style the sort select input.
Is anyone have any idea ? Maybe I'm missing something.
Thank you for your help.
You can use the dynamic slots item.<name> and customise v-select or v-autocomplete inside: https://vuetifyjs.com/en/components/data-tables/#item
I'm trying to style a Buefy button to look like a simple text-link.
For example, it is possible to use:
<b-button
tag="a"
type="is-text"
href="https://www.example.com"
>
Click here
</b-button>
This produces near the result I'm looking for, except I want to achieve a type such as is-text-red and is-text-blue to make the button appear as text of particular colours.
I could solve this by simply using:
Click here
Click here
But I want to use <b-button type="is-text-red"> to make an inline link.
Can anyone point me in a direction that involves Bulma CSS and/or Buefy CSS modifications that would achieve this?
I'm looking at the node_modules BButton component, and it looks like the type prop is passed through, so it looks possible to create a custom type somewhere that would be analogous to is-info and is-warning.
I would like to have text-only versions such as is-text-info and is-text-warning so I can use the button component to place inline anchor tags.
Stated concisely, how does a person add another type to <b-button> that provides arbitrary styling?
Check this link(https://buefy.org/documentation/customization/). You might need to define your own css overrides.
I get all the concept of components but one thing I am stuck at is - when to create a component? In other words, what part of the page should be a component?
Link to sample problem image
Taking above image as example, what I think is progress bar can be one component and form, quotes list, blue alert can be second component.
Please advise as necessary.
There can be many reasons for creating components, such as when you need to create a reusable element, splitting the code to make it easier to understand and reduce code complexity.
In your case 1. you can put both of the sections into a single component or you can put them into separate components if you want to reuse them somewhere. 2. if your code is too much and you want to make it simpler to understand in that case you can also create separate components.
My problem is the next:
I have a table in which I store information, by clicking on a row there will be a window in which I show that information in a certain format.
The problem I have when I try to make the table responsive because when trying to see it on small devices I have to do side scroll. I tried to hide columns with "display: hidden" but the data I can not retrieve, beacuse it not exists.
How can i do this?
Do yourself a favor - do not reinvent the wheel and use a specialized library, for example Datatables. At the very least, take a look at how datatables makes the table responsive.
You have not mentioned it, so I assume you are ok using jQuery, Bootstrap 3 or 4, Semantic UI or Foundation. For React / Angular there maybe other options.
I am trying to build an admin dashboard using material design framework. As a part of it, I am trying to add modal-trigger element inside a <td></td> tag of a table that uses datatable.js library. But when I click on the trigger no modal is appearing. Did anyone face similar issue before?
I think that what's happening is that your trigger isn't in the DOM when you draw the table, but without seeing your code I can't be sure. Generally, it will trigger a modal when it is clicked or something? You might want to change the actual triggering to clicking on a td with a given class contained within the table so something like this:
$(".modal-trigger").click(function(){//Open Modal});
This would work on the first page but not after the first draw of the table as the event had been registered before the elements were within the DOM. Rather, you'd need to listen to the click within the table like this:
$("#table-id").on("click", ".modal-trigger", function(){//Open Modal});
I hope that makes sense and that it helps, if not perhaps work up a JSFiddle illustrating your issue?