[Solved] v0.15 QTable Specify Width of a Column In A Table for Long Texts With Word Wrap

[snowdrop]

In v0.15 QTable, Is it possible to specify the width of a column in a table if my column has long texts and will just do a “word wrap” functionality wherein excess texts will just go to the next line?

[eder.blinga]

Add CSS

.q-table tbody td {
    white-space: normal;
}

[snowdrop]

@eder-blinga thanks, I’ll try this one later. First, I’ll try to set the width for each column via css.

[snowdrop]

@eder-blinga any idea on how could I set the width of columns? I’ve tried adding this code but it won’t work:

.q-table thead th {
    width: 50px;
}

.q-table tbody td {
    width: 50px;
}

[snowdrop]

It somehow work using this:

.q-table thead th {
    width: 50px;
    white-space: normal;
}

.q-table tbody td {
    width: 50px;
    white-space: normal;
}

Still searching on how could I specify only a specific column to have that width.

[snowdrop]

Done. This is what my code looks like:

<q-td :style="{width: '400px', whiteSpace: 'normal'}" slot="body-cell-address" slot-scope="props" :props="props">
    {{props.value}}
</q-td>

I hope it can help others who might face the same problem. thanks.

[hipernova]

Hey! I am facing the same problem.
Can you post code for whole <q-table>?

Also, manipulating column width in previous version was great

[Hawkeye64]

Here’s some customization I am doing. The first column receives an icon, and the last column has text and background color change. All the columns between are normal. You should be able to see how to customize based on this:

    <q-table
      dense
      color="teal-6"
      :data="alarms"
      :columns="columns"
      row-key="id"
      :pagination.sync="pagination"
    >
      <q-tr slot="body" slot-scope="props" :props="props" @dblclick.native="rowDoubleClick(props.row)" class="cursor-pointer">
        <q-td key="downloaded" :props="props">
          <q-icon :name="getDownloadStatusIcon(props)" />
        </q-td>
        <q-td
          v-for="col in props.cols"
          v-if="col.name !== 'downloaded' && col.name !== 'acknowledgement'"
          :key="col.name"
          :props="props"
        >
          {{ col.value }}
        </q-td>
        <q-td key="acknowledgement" :props="props" :style="ackWhoStyleObject(props.row)" @click.native="onAckWho(props.row)">
          {{ getAckText(props.row.ackWho) }}
        </q-td>
      </q-tr>
    </q-table>

[snowdrop]

@hipernova Sorry for my late reply. Seems that notifications does not work anymore when someone replies on my previous posts.

Anyway, I did not customize any code in my QTable, I just added the code above between <q-table> and </q-table> tags.

You can change the width, in my example 400px, and specifying the slot in the slot directive by adding body-cell- to your column name. In my case, my column name is address so the slot name became body-cell-address.