Bootstrap Table en el navegador

Aprende a usar el Componente Vue de Bootstrap Table en tu proyecto usando el navegador.

En esta página

JavaScript de VueJS

Además de los archivos que menciona Inicio rápido, también necesitas incluir nuestro archivo de componente vue.

<script src="https://gcore.jsdelivr.net/npm/bootstrap-table@1.26.0/dist/bootstrap-table-vue.umd.js"></script>

Uso

<div id="app">
  <bootstrap-table :columns="columns" :data="data" :options="options"></bootstrap-table>
</div>

<script>
  const { createApp, ref } = Vue
  const app = createApp({
    setup () {
      const columns = ref([
        {
          field: 'state',
          checkbox: true
        },
        {
          title: 'ID del elemento',
          field: 'id'
        },
        {
          field: 'name',
          title: 'Nombre del elemento'
        },
        {
          field: 'price',
          title: 'Precio del elemento'
        },
        {
          field: 'action',
          title: 'Acciones',
          align: 'center',
          formatter () {
            return '<a href="javascript:" class="like"><i class="fa fa-star"></i></a>'
          },
          events: {
            'click .like' (e, value, row) {
              alert(JSON.stringify(row))
            }
          }
        }
      ])
      const data = ref([
        {
          id: 0,
          name: 'Elemento 0',
          price: '$0'
        },
        {
          id: 1,
          name: 'Elemento 1',
          price: '$1'
        },
        {
          id: 2,
          name: 'Elemento 2',
          price: '$2'
        },
        {
          id: 3,
          name: 'Elemento 3',
          price: '$3'
        },
        {
          id: 4,
          name: 'Elemento 4',
          price: '$4'
        },
        {
          id: 5,
          name: 'Elemento 5',
          price: '$5'
        }
      ])
      const options = ref({
        search: true,
        showColumns: true
      })

      return {
        columns,
        data,
        options
      }
    }
  })

  app.component('BootstrapTable', BootstrapTable)
  app.mount('#app')
</script>

Plantilla de inicio

<!doctype html>
<html lang="es">
  <head>
    <!-- Meta tags requeridos -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>¡Hola, Bootstrap Table!</title>

    <link rel="stylesheet" href="https://gcore.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://gcore.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
    <link rel="stylesheet" href="https://gcore.jsdelivr.net/npm/bootstrap-table@1.26.0/dist/bootstrap-table.min.css">
  </head>
  <body>
    <div id="app">
      <bootstrap-table :columns="columns" :data="data" :options="options"></bootstrap-table>
    </div>

    <script src="https://gcore.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
    <script src="https://gcore.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://gcore.jsdelivr.net/npm/vue@2.7.16/dist/vue.min.js"></script>
    <script src="https://gcore.jsdelivr.net/npm/bootstrap-table@1.26.0/dist/bootstrap-table.min.js"></script>
    <script src="https://gcore.jsdelivr.net/npm/bootstrap-table@1.26.0/dist/bootstrap-table-vue.umd.js"></script>
    <script>
      const { createApp, ref } = Vue
      const app = createApp({
        setup () {
          const columns = ref([
            {
              field: 'state',
              checkbox: true
            },
            {
              title: 'ID del elemento',
              field: 'id'
            },
            {
              field: 'name',
              title: 'Nombre del elemento'
            },
            {
              field: 'price',
              title: 'Precio del elemento'
            },
            {
              field: 'action',
              title: 'Acciones',
              align: 'center',
              formatter () {
                return '<a href="javascript:" class="like"><i class="fa fa-star"></i></a>'
              },
              events: {
                'click .like' (e, value, row) {
                  alert(JSON.stringify(row))
                }
              }
            }
          ])
          const data = ref([
            {
              id: 0,
              name: 'Elemento 0',
              price: '$0'
            },
            {
              id: 1,
              name: 'Elemento 1',
              price: '$1'
            },
            {
              id: 2,
              name: 'Elemento 2',
              price: '$2'
            },
            {
              id: 3,
              name: 'Elemento 3',
              price: '$3'
            },
            {
              id: 4,
              name: 'Elemento 4',
              price: '$4'
            },
            {
              id: 5,
              name: 'Elemento 5',
              price: '$5'
            }
          ])
          const options = ref({
            search: true,
            showColumns: true
          })

          return {
            columns,
            data,
            options
          }
        }
      })

      app.component('BootstrapTable', BootstrapTable)
      app.mount('#app')
    </script>
  </body>
</html>