I’m using Vue CoreUI admin template for a project, and I have a CDataTable. However, I have too many columns and instead of squishing them like you see in the screenshot, I’d like to have a horizontal scroll and just scroll to the right to see the other columns.
Any advice? Here is my code and the screenshot of what it looks like right now.
Code:
<template>
<div>
<CCard v-if="tableFields.length > 0">
<CCardHeader>
<slot name="header">Inventory list of vehicles</slot>
</CCardHeader>
<CCardBody>
<CDataTable
:fields="tableFields"
:items="tableItems"
:striped="true"
:items-per-page="10"
:fixed="true"
:clickable-rows="true"
table-filter
sorter
>
</CDataTable>
</CCardBody>
</CCard>
</div>
</template>
Screenshot:
DataTable screenshot