How to expand Vuetify/HTML table to needed width without cutting off content?

baitendbidz
February 21, 2023
104 views
3 votes
3 Answers

Given a Vue app based on Vuetify using the table component. When using this setup

<template>
  <v-app>
    <v-main>
      <v-container fluid>
        <v-table>
          <thead>
            <tr>
              <th>Col 1</th>
              <th>Txt</th>
              <th>Checkbox Column</th>
              <th>Select ( plain txt )</th>
              <th>Chips</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>
                <v-text-field label="Label goes here" model-value="some text goes here"></v-text-field>
              </td>
              <td>
                <v-checkbox label="Label for checkbox goes here" :model-value="true"></v-checkbox>
              </td>
              <td>
                <v-select label="Select with plain text" :items="[1, 2, 3]" :model-value="1"></v-select>
              </td>
              <td>
                <v-select label="Select with chips" multiple chips :items="['aaaaaaa', 'bbbbbbbbb', 'Some more items here']" :model-value="['Some more items here']"></v-select>
              </td>
            </tr>
          </tbody>
        </v-table>
      </v-container>  
    </v-main>
  </v-app>
</template>

The table looks fine on large screens

but the table breaks on smaller screens

This table should work for desktops ( no need for responsive mobile support ) and has a dynamic amount of columns ( at least more than 20 ). I want each column ( and its elements ) to expand to a "human readable" width. So no label, chip, text etc. should be cut off. It’s perfectly fine if the horizontal scrollbar is huge. But I would like to avoid using a hardcoded columns width because each column should only take the space it needs to display its content.

I hope it’s not a Vuetify problem because the table relies on basic HTML but I don’t know how to fix it via CSS.

Answers

Chosen as BEST ANSWER
- baitendbidz
- March 1, 2023 at 1:26 pm
- 0 votes
0
As an alternative to Rohìt Jíndals answer, I found a temporary workaround to prevent elements from cutting off content.

It is not a perfect solution, as gigantic labels and chips still won't fit.
```
<style scoped>
/* elements with content requiring more than 200px will still struggle... */
.v-text-field,
.v-select {
  min-width: 200px;
}

/* do not cut off chip content */
.v-select v-chip {
  overflow: visible;
}

/* expand chip */
.v-select .v-field__input {
  width: unset;
}
</style>
```
But now no content is cut off. Demo

(Edit)

set white-space: nowrap; property for td if the dynamic content is not lengthy plain text or if you do not have an issue with presenting it on single line.

Example code base is added for reference.

td {
      white-space: nowrap;
    }
    td {
      padding: 15px;
    }

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    td {
      white-space: nowrap;
    }
    td {
      padding: 15px;
    }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>Col 1</th>
        <th>Txt</th>
        <th>Checkbox Column</th>
        <th>Select ( plain txt )</th>
        <th>Chips</th>
        <th>Col 1</th>
        <th>Txt</th>
        <th>Checkbox Column</th>
        <th>Select ( plain txt )</th>
        <th>Chips</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>
          test data test
        </td>
        <td>
          <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike sdahsv dhasvd asvdagsdga v</label><br>
        </td>
        <td>
          <label for="cars">Choose a car:</label>

<select name="cars" id="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes sd svahsv asvdgasVD Gasvdghsadvhgas vdagsvdhgasdhgasdvgh</option>
  <option value="audi">Audi</option>
</select>
        </td>
        <td>
          sample data sample data
        </td>
        <td>1</td>
        <td>
          sample data sample data sample data sample data sample data sample data sample data sample data sample data sample data sample data
        </td>
        <td>
          sample data sample data sample data sample data
        </td>
        <td>
          sample data
        </td>
        <td>
          data
        </td>
      </tr>
    </tbody>
  </table>
</body>
</html>

As you are using Vuetify 3 <v-table> component and it is just a simple wrapper component around the HTML <table> element. I did not see any inbuilt props to setting the width for the table as well as for the columns. Hence, you can only achieve this at this point of time by applying the custom width on td and th with the help of CSS.

Live Demo :

const { createApp } = Vue
const { createVuetify } = Vuetify

const vuetify = createVuetify()

const app = createApp({
  template: '#app-template'
}).use(vuetify).mount('#app')

th, td { min-width: 200px; }

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/@vuetify/[email protected]/dist/vuetify.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@vuetify/[email protected]/dist/vuetify.css"/>

<script type="text/x-template" id="app-template">   
<v-table>
          <thead>
            <tr>
              <th>Col 1</th>
              <th>Txt</th>
              <th>Checkbox Column</th>
              <th>Select ( plain txt )</th>
              <th>Chips</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>
                <v-text-field label="Label goes here" model-value="some text goes here"></v-text-field>
              </td>
              <td>
                <v-checkbox label="Label for checkbox goes here" :model-value="true"></v-checkbox>
              </td>
              <td>
                <v-select label="Select with plain text" :items="[1, 2, 3]" :model-value="1"></v-select>
              </td>
              <td>
                <v-select label="Select with chips" multiple chips :items="['aaaaaaa', 'bbbbbbbbb', 'Some more items here']" :model-value="['Some more items here']"></v-select>
              </td>
            </tr>
          </tbody>
        </v-table>
</script>

<div id="app"></div>

Please signup or login to give your own answer.

Click here to cancel reply.