Creating personalized columns in a BootstrapVue table

I'm having an issue with the b-table component in bootstrap-vue.

The array containing my items is structured like this:

[{
    id: 1,
    name: "Test",
    phone: 555-111-666,
    address: "Some Address",
    //etc...

}]

I have a couple of questions related to this:

Firstly, how can I customize the column names instead of using the ones from the object when binding with :items=myArray? Is it possible to set custom column names?

Secondly, I only want to display certain data fields (e.g. name and address) in the table instead of showing all the data. How can I achieve this?

Lastly, how can I add a custom column with, for example, an icon instead of the value from the object?

Appreciate any assistance on these matters.

javascripthtmlcssvue.jsbootstrap-4

Answer №1

To display specific fields in a table, you must use the fields prop and provide an array of field objects. The key attribute determines which property from your object will be used for data, while the label attribute specifies what will be shown in the header. Additionally, you can include virtual fields using a non-existent key, and then utilize slots to present custom data in that column.

If you require more information, refer to the documentation:

Fields reference:

Custom data rendering: 

new Vue({
  el: "#app",
  data() {
    return {
      items: [{
          id: 1,
          name: "Test 1",
          phone: "111-222-333",
          address: "Some address"
        },
        {
          id: 2,
          name: "Test 2",
          phone: "444-555-666",
          address: "Another address"
        },
        {
          id: 3,
          name: "Test 3",
          phone: "777-888-999",
          address: "Questionable address"
        }
      ],
      fields: [{
          key: "name",
          label: "Full Name"
        },
        {
          key: "address",
          label: "User Address"
        },
        {
          key: "custom_column",
          label: "Custom Column"
        }
      ]
    };
  }
});
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5d3f3232292e292f3c2d702b28381d6f736f6c736f">[email protected]</a>/dist/bootstrap-vue.min.css" />
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4f393a2a0f7d6179617d">[email protected]</a>/dist/vue.min.js"></script>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="42202d2d3631363023326f34372702706c70736c70">[email protected]</a>/dist/bootstrap-vue.min.js"></script>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f1939e9e858285839081dc878494b1c3dfc3c0dfc3">[email protected]</a>/dist/bootstrap-vue-icons.js"></script>

<div id="app">
  <b-table :items="items" :fields="fields">
    <template #cell(custom_column)>
      <b-icon icon="question-circle"></b-icon>
    </template>
  </b-table>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Color in the diamond shape only to a designated height

I am in search of a unique diamond shape that allows me to fill the color up to a specific height based on an attribute or variable provided. https://i.stack.imgur.com/62U6h.png. I attempted creating the diamond shape and initially considered placing it ...

javascripthtmlcss

Using AngularJS to update text content retrieved from a file and display it in a textarea

Is there a way to create a textarea using AngularJS that can be populated either by typing, entering a URL, or uploading a plain text file? While I am able to load the file content into the variable linked to the textarea, I'm facing an issue where ge ...

javascriptangularjstextarea

What are the steps to resolving an issue in a Jest unit test?

In my ReactJs/Typescript project, I encountered an issue while running a unit test that involves a reference to a module called nock.js and using jest. Initially, the import statement was causing an error in the .cleanAll statement: import nock from &apos ...

javascriptreactjsunit-testingtypescriptjestjs

Vue component unexpectedly refreshed without cause

I noticed that my component is being re-rendered for no apparent reason whenever the parent's data item is changed, even though it has nothing to do with the component itself. For a simple demonstration, you can check out this example here. (Clicking ...

vue.jsvuejs2vue-component

the JavaScript anchor feature is malfunctioning

Steps to Play Back: To start, in the header section, select any of the links with anchors: ##bankaccount #pack #platform #acq ##scorecard ##intrade #form Next, scroll up to the top of the page Then, reload the page Actual Outcome: Upon reloading a page w ...

javascriptreactjs

JavaScript: Working with Nested Callbacks and Retrieving MySQL Data

As I dive into the world of JavaScript server-side code, I find myself grappling with a common issue that many programmers face. In my previous experience with MySQL select queries in PHP, I would simply grab a result and loop through each row, performing ...

javascriptscopeserverside-javascript

What is the process for obtaining the hash of every hyperlink?

I'm currently working on implementing an active link state based on scroll position for each section. My goal is to extract the hash value from the link. The issue I'm facing is that when I run the line 'console.log($(this).eq(i).hash);&ap ...

javascriptjquery

Changing the value of a form input name after a $scope.$watch event is activated

In my AngularJS 1.4 project, I have a form input element where I am attempting to dynamically set the name attribute. <input type="email" name="{{ctrl.name}}" class="form-control" id="email" ng-minlength="5" required> The assignment of the name att ...

javascripthtmlangularjsformsangularjs-scope

CSS designed for small-screen laptops is also being utilized on iPads running Safari

To specifically target the iPad/Safari browser and accommodate some minor differences in appearance compared to windows/linux browsers, we are implementing the following HTML meta tag and style query: <meta name="viewport" content="width=device-width, ...

cssipadsafari

The element type 'HTMLElement' does not contain a property named 'pseudoStyle'

Currently experimenting with adjusting the height of a pseudo element using Typescript. An error is popping up in my IDE (vscode) as I go along. This is the code snippet I am working with. // choose element let el: HTMLElement = document.getElementById( ...

javascriptangulartypescriptionic3pseudo-element

The error message "Invalid Data Type: Not an Array - google charts" was encountered

I am struggling with an ajax call that I have set up. The issue arises when passing an array from the backend to the frontend. Upon checking the data through an alert on the frontend, everything seems fine. However, Google charts raises an error stating th ...

javascriptc#jqueryajaxgoogle-visualization

Swap two pairs of elements in an array in a random order

I have a list of team members and also 2 substitute players: team = Samson, Max, Rowan, Flynn, Jack subs = Struan, Harry I am facing a challenge in randomly swapping the 2 subs into the team. The difficulty lies in ensuring that only these 2 elements are ...

javascriptarraysgoogle-apps-scriptgoogle-sheets

Utilizing the v-for directive to loop through JSON data with unique IDs and linking them to Input components in PrimeVue

In my database, I have a collection of products with a column named attributes that stores property/value pairs in JSON format. Each product can have unique attributes. For instance, one product's attributes could be: #product1 attributes { color: & ...

javascriptjsonvue.jsvuejs2primevue

When working with Firebase, I am required to extract data from two different tables simultaneously

When working with Firebase, I have the need to extract data from tables/nodes. Specifically, I am dealing with two tables - one called jobs and the other called organisations. The outcome I am looking for: I want to retrieve all companies that do not hav ...

javascriptfirebasefirebase-realtime-database

The issue with React select right-to-left (RTL) functionality is that it

When using react select, I include isRtl as a prop like so: <Select onChange={handleChange} isRtl isMulti options={colourOptions} /> However, only the input receives the rtl direction style and not the options. How can I ensure that both the input a ...

javascriptcssreactjsreact-select

Dynamically include new events

Here is the code snippet I have in a JS file: $(".dropmenu").on("click", function(event){ event.preventDefault(); $(this).parent().find("ul").slideToggle(); }); On my webpage, I'm using the following code: var append="<ul> ...

jquerycsseventsdynamic

Can the root directory of a node module be customized or specified?

When publishing a node module with source files in a src directory, users typically need to specify the full path from the module when importing a file into their project. For example: Directory Structure: my-module --src ----index.js ----something-else ...

javascriptnode.jsnpm

Executing a closure within a promise's callback

Currently, I am working on implementing a queue system for a web application in order to locally store failed HTTP requests for later re-execution. After reading Mozilla's documentation on closures in loops, I decided to create inner closures. When ...

javascriptangularjs

How can you line up various form elements, like pickers, in a row using Material UI?

As someone new to material ui, I haven't come across a solution for my specific issue yet. While there are similar questions, none seem to address the problem of aligning different form field types. My observation is that the material ui date picker ...

cssreactjstypescriptmaterial-ui

Unable to dynamically update properties in CSS and JavaScript without refreshing the page

I've tried applying active properties in my CSS and JavaScript, but it doesn't seem to be working as expected. I can click on each list item, but the active state is not being displayed correctly. Can someone please assist me with this issue? I w ...

javascripthtmlcss