Simple Datatable with column resize - CDN version

mphouston · 05 Feb 2021, 15:07

All,

I am able to get a simple table working. When I added options to allow column resize, the resize options fail.

Am I missing some dependencies in the components I need?

I hope to use more complex elements this way, but I am worried that I just can't do that once I get beyond simple components and scenarios.

Code: Select all

<html>
    <head>
        <meta charset="utf-8">
        <title>PrimeVue Demo</title>
        <link href="https://unpkg.com/primevue@3.1.1/resources/themes/saga-blue/theme.css" rel="stylesheet">
        <link href="https://unpkg.com/primevue@3.1.1/resources/primevue.min.css" rel="stylesheet">
        <link href="https://unpkg.com/primeicons@4.1.0/primeicons.css" rel="stylesheet">
        <link href="https://unpkg.com/primeflex@2.0.0/primeflex.css" rel="stylesheet">

        <script src="https://unpkg.com/vue@3.0.5/dist/vue.global.js"></script>
        <script src="https://unpkg.com/primevue@3.1.1/components/datatable/datatable.umd.min.js"></script>
        <script src="https://unpkg.com/primevue@3.1.1/components/column/column.umd.min.js"></script>
    </head>
    <body>
        <div id="app">
          <DataTable :value="products" :gibberish="true" :resizableColumns="true" columnResizeMode="expand" class="p-datatable-gridlines editable-cells-table" editMode="cell">
            <Column field="id" header="ID"></Column>
            <Column field="name" header="Name"></Column>
            <Column field="category" header="Category"></Column>
            <Column field="quantity" header="Quantity"></Column>
          </DataTable>

        </div>
        <script>
const ComponentsApp = {
  data() {
    return {
      products: [
        { id: 0, name: 'Vegetables' },
        { id: 1, name: 'Cheese' },
        { id: 2, name: 'Whatever else humans are supposed to eat' }
      ]
    }
  }
}
const app = Vue.createApp(ComponentsApp);
app.component('datatable', datatable);
app.component('column', column);

app.mount('#app')

        </script>
    </body>
</html>

mphouston · 07 Feb 2021, 19:57

I assumed I was missing some component, so I add <script> tags for all components in the 3.1.1 npm bundles. It does not help. I am obviously missing something else. Any ideas?

I still get no ability to resize the columns. The :resizableColumns="true" is ignored.

I think I am hitting issues with something vue/CLI/webpack is doing to polyfill something not defined in Chrome. This is what happens when I try to use a framework differently from the developers

.

Simple Datatable with column resize - CDN version

Who is online