vue3-table-lite
vue3-table-lite copied to clipboard
linmasahiro
Unable to get table width to be responsive and fixed first column in table header not fixed
Hello @linmasahiro
-
My table on very large screens doesn't fill the entire width of the containing div as shown in attached image. The expectation was that the table will fill the screen on very large screen sizes and shrink on very small desktop sizes. It shrinks on mobile but not laptop or desktop
-
On normal laptop screens with the container div constrained, the expectation is that the table because is responsive will show the horizontal scroll bar so the overflow parts can be scrolled to, but this doesn't work on normal laptop screens. This expected horizontal scrolling works well on mobile screens. Image shows how table displays on a 15" laptop screen where the container div is shrunk by the sidebar. Without the sidebar all table elements show, the expectation was that the table will show a scroll bar so the overflow elements can be scrolled into view.
-
is-fixed-first-column implementation for my case seems to ignore the table header column, so the table header first column is not fixed but scrolls with the rest of the content. Image shows the first column in the table header scrolling while the rest of first column remains fixed on a mobile screen
my code is below
<div class="flex flex-wrap -mx-2 px-2 h-fit overflow-hidden pb-5 bg-red-300">
<div class="w-full max-h-fit bg-green-300" :class="showRightPanel ? 'lg:w-3/4' : 'w-full'">
<div class="flex flex-row">
<table-lite :is-static-mode="true" :is-slot-mode="true" :has-checkbox="true"
:is-loading="table.isLoading" :is-fixed-first-column="true" :columns="table.columns"
:rows="table.rows" :total="table.totalRecordCount" :sortable="table.sortable"
@is-finished="table.isLoading = false" @return-checked-rows="updateCheckedRows"
@row-clicked="rowClicked">
</table-lite>
</div>
</div>
<div v-if="showRightPanel" class="hidden lg:block lg:w-1/4 px-2 max-h-80 pb-4">
<MessageStreamsTabbedPanel />
</div>
Hi, @nosizejosh I can't reproduce this issue, but I think maybe have something conflict on my style and your style-framework? Can you upload your example code to jsfiddle or etc? It's help debug for me.
This is the entire page, though some are layout and components, I have put all together to make it easier for you to run. Its a nuxt app so difficult to create and host a reproduction. I am using tailwind with default settings.
<div class="max-w-[100vw] flex min-h-screen antialiased text-gray-900" ref="el">
<Sidebar :show="isSidebarExpanded" />
<div class='flex max-w-full flex-col flex-1' :class="isSidebarExpanded ? 'lg:pl-64' : 'lg:pl-20'">
<!-- <Top Nav Bar > -->
<header class='sticky top-0 z-10 bg-white flex-shrink-0 border-b transition-transform duration-500' :class="{ '-translate-y-full': scrollingDown, '-translate-y-0': scrollingUp }">
<div class="flex items-center justify-between">
<!-- alwways show this -->
<div class="flex items-center space-x-1">
<NuxtLink :to="'/'" class="p-2 text-xl font-semibold tracking-wider uppercase lg:hidden">
<Icon :name="'twemoji:honeybee'" aria-hidden="true" class="flex-shrink-0 w-7 h-7 text-gray-400 mr-1" />
</NuxtLink>
<ToggleSidebar />
</div>
<!-- custom heading -->
<h1 class="text-black dark:text-white font-bold hidden text-2xl sm:block">
<slot name="topNavTitle">Name</slot>
</h1>
<!-- custom nav -->
<nav aria-label="Secondary" class="flex items-center md:space-x-5 px-2">
<slot name="topNavMenu">
</slot>
</nav>
</div>
</header>
<!-- </Top Nav Bar > -->
<div class="flex-1 bg-gray-200 p-3">
<div class="flex flex-wrap -mx-2 px-2 h-fit overflow-hidden pb-5 bg-red-300">
<div class="w-full max-h-fit bg-green-300" :class="showRightPanel ? 'lg:w-3/4' : 'w-full'">
<!-- <TicketsTable /> -->
<div class="flex flex-row">
<table-lite :is-static-mode="true" :is-slot-mode="true" :has-checkbox="true" :is-loading="table.isLoading" :is-fixed-first-column="true" :columns="table.columns" :rows="table.rows" :total="table.totalRecordCount" :sortable="table.sortable" @is-finished="table.isLoading = false" @return-checked-rows="updateCheckedRows" @row-clicked="rowClicked">
<template v-slot:ticket_counter="data">
<div class="ml-auto relative group">
<span style="
padding: 2px 5px;
font-size: 0.5rem;
position: relative;
bottom: 2px;
/* FIXME: replace N with either first three letters of ticket type or ticket type */
/* TODO: replace default yello wwith the color asociated with ticke type */
" class="font-mono rounded-sm bg-yellow-400 text-black leading-none">N</span> {{
data.value.ticket_counter
}}
<!-- dropdown -->
<span class="hidden group-hover:block ml-4 mt-10 w-screen max-w-lg absolute top-0 border shadow-lg p-6 bg-white rounded-md z-50 text-gray-900">
<article>
<header>
<div>
<span class="px-3 py-1 uppercase text-xs leading-none rounded-sm bg-yellow-400 text-black">New</span>
<span class="ml-2 text-gray-700">#{{ data.value.ticket_counter }}</span>
<span class="ml-1">({{ data.value.priority }})</span>
</div>
</header>
<section class="mt-5">
<h1 class="text-sm font-semibold mt-3">
{{ data.value.summary }}
</h1>
<p class="mt-3">
{{ data.value.description }}
</p>
</section>
<footer class="mt-4 hidden">
<p class="text-gray-600">Latest Comments</p>
<hr class="mt-1" />
<div class="flex mt-3">
<p class="font-semibold"></p>
<p class="ml-auto text-gray-700 text-sm"></p>
</div>
<p class="mt-2"></p>
</footer>
</article>
</span>
<!-- end dropdown -->
</div>
</template>
<template v-slot:summary="data">
<div class="ml-auto relative group">
<span>{{ data.value.summary }}</span>
<!-- dropdown -->
<span class="hidden group-hover:block ml-4 mt-10 w-screen max-w-lg absolute top-0 border shadow-lg p-6 bg-white rounded-md z-50 text-gray-900">
<article>
<header>
<div>
<span class="px-3 py-1 uppercase text-xs leading-none rounded-sm bg-red-600 text-white">{{
data.value.status
}}</span>
<span class="ml-2 text-gray-700">#{{ data.value.ticket_counter }}</span>
<span class="ml-1">({{ data.value.priority }})</span>
</div>
</header>
<section class="mt-5">
<h1 class="text-sm font-semibold mt-3">
{{ data.value.summary }}
</h1>
<p class="mt-3">
{{ data.value.description }}
</p>
</section>
<footer class="mt-4">
<!-- FIXME: Get data for section below -->
<p class="text-gray-600">Latest Comments</p>
<hr class="mt-1" />
<div class="flex mt-3">
<p class="font-semibold">Nico Braun</p>
<p class="ml-auto text-gray-700 text-sm">
Yesterday 10:33
</p>
</div>
<p class="mt-2">
Dolore odio error inventore sint et dolorum
asperiores exercitationem, quisquam esse.
</p>
</footer>
</article>
</span>
<!-- end dropdown -->
</div>
</template>
</table-lite>
</div>
</div>
<div v-if="showRightPanel" class="hidden lg:block lg:w-1/4 px-2 max-h-screen overflow-scroll pb-10 bg-red-500">
<ul class="flex flex-row cursor-pointer items-center text-sm text-grey-dark bg-white border-b-2">
<li @click.prevent="setCurrentTab(1)" :class="{
'text-blue-500 border-b-2 border-blue-500':
currentHomeTab == 1,
}" class="flew-grow h-full py-2 px-6 bg-white">All</li>
<li @click.prevent="setCurrentTab(2)" :class="{
'text-blue-500 border-b-2 border-blue-500':
currentHomeTab == 2,
}" class="flew-grow py-2 px-6 text-gray-500 ">Read</li>
<li @click.prevent="setCurrentTab(3)" :class="{
'text-blue-500 border-b-2 border-blue-500':
currentHomeTab == 3,
}" class="flew-grow py-2 px-6 text-gray-500 ">Un-Read</li>
</ul>
<div v-if="currentHomeTab === 1" class="py-3 bg-white">
<TicketsMessageStrems />
</div>
<div v-if="currentHomeTab === 2" class="p-2">
tab 2 content
</div>
<div v-if="currentHomeTab === 3" class="p-2">
tab 3 content
</div>
</div>
</div>
</div>
<Footer />
</div>
</div>
This style is applied in table component
<style scoped>
::v-deep(.vtl-table .vtl-thead .vtl-thead-th) {
color: rgb(107 114 128);
background-color: white;
border-color: transparent;
/* border-color: transparent;
border-bottom: 2px bold black; */
}
::v-deep(.vtl-table td),
::v-deep(.vtl-table tr) {
border: none;
}
::v-deep(.vtl-paging-info) {
/* color: rgb(172, 0, 0); */
color: rgb(107 114 128);
}
::v-deep(.vtl-paging-count-label),
::v-deep(.vtl-paging-page-label) {
/* color: rgb(172, 0, 0); */
color: rgb(107 114 128);
}
::v-deep(.vtl-paging-pagination-page-link) {
border: none;
}
</style>
on initial load, the borders show for a second before these styles are applied. I'm sure there's a way to prevent the default style showing for second before these styles are applied
Hi , @nosizejosh
Its a nuxt app so difficult to create and host a reproduction
No, it's easy startup in codesandbox. I created nuxt.js + taliwind css sandbox on here, please fork it and reproduce this issue. thanks
https://codesandbox.io/p/sandbox/hungry-wood-7p883i?file=%2Fpages%2Findex.vue&selection=%5B%7B%22endColumn%22%3A13%2C%22endLineNumber%22%3A14%2C%22startColumn%22%3A13%2C%22startLineNumber%22%3A14%7D%5D
@linmasahiro I have run nuxt 3 here but it fails to run after installing table-lite
@nosizejosh , I started an environment with Nuxt3 and vue3-table-lite on Codesanbox.io. Maybe can help you reproduce this issue. If you can't reproduce it, I can't help you to find bug. Because I haven't your environment and I don't know what did you do.
https://codesandbox.io/p/sandbox/peaceful-taussig-u4izn1?file=%2Fpages%2Findex.vue&selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A8%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A8%7D%5D
@linmasahiro great news. while going through a step by step process to reproduce my issue with your sanbox, I discovered an extra div with flex was the culprit for 1 and 2. So they are both resolved now.
<template>
<!-- <div class="flex flex-row"> -->
<table-lite
:is-loading="table.isLoading"
:columns="table.columns"
:rows="table.rows"
:total="table.totalRecordCount"
:sortable="table.sortable"
:messages="table.messages"
@do-search="doSearch"
@is-finished="table.isLoading = false"
></table-lite>
<!-- </div> -->
</template>
Now working to reproduce or solve for 3
I have been able to reproduce issue 3. The ID column header which is part of the fixed column moves on horizontal scroll.
I have been able to reproduce issue 3. The ID column header which is part of the fixed column moves on horizontal scroll.
I accessed your link, but it's not work and output something error like below. Maybe not complete yet?
was accessed during render but is not defined on instance.
[Vue warn]: Property "scrollingUp" was accessed during render but is not defined on instance.
[nuxt] [request error] Invalid value used as weak map key
...
Hi, @nosizejosh I already fixed this bug, thanks for your ticket. Please upgrade to v1.3.2 and close this issue if no problem.
Sorry for the late response. Yes it fixes the 3rd issue. However the left and right borders of the header of the fixed column are black and ignoring the styling I have which with the previous version showed no border color.
<style scoped>
::v-deep(.vtl-table .vtl-thead .vtl-thead-th) {
color: rgb(107 114 128);
background-color: white;
border-color: transparent;
/* border-color: transparent;
border-bottom: 2px bold black; */
}
::v-deep(.vtl-table td),
::v-deep(.vtl-table tr) {
border: none;
}
::v-deep(.vtl-paging-info) {
/* color: rgb(172, 0, 0); */
color: rgb(107 114 128);
}
::v-deep(.vtl-paging-count-label),
::v-deep(.vtl-paging-page-label) {
/* color: rgb(172, 0, 0); */
color: rgb(107 114 128);
}
::v-deep(.vtl-paging-pagination-page-link) {
border: none;
}
</style>
Sorry for the late response. Yes it fixes the 3rd issue. However the left and right borders of the header of the fixed column are black and ignoring the styling I have which with the previous version showed no border color.
Because if using postion: sticky and border-collapse: collapse will be has border hide issue on CSS, you can ref this issue https://stackoverflow.com/questions/50361698/border-style-do-not-work-with-sticky-position-element.
And I wanna resolve this problem so I add border-right on scorlling.
If you wanna be custom border or hide it, please add below to your style:
::v-deep(.fixed-first-column tr th:first-child::before),
::v-deep(.fixed-first-second-column tr th:nth-child(2)::before) {
border-right: none;
}
Hello, I have the same issue (number 1) with table that doesn't take the whole width, see below :
I specified column width property as respectively: 5%, 31%,31%,31% :
Here's the code :
I tried to remove the b-container but it's the same, any idea please ?
Hello, I have the same issue (number 1) with table that doesn't take the whole width, see below : I specified column width property as respectively: 5%, 31%,31%,31% : I tried to remove the b-container but it's the same, any idea please ?
@cams03 Maybe your stylesheet contaminated component's stylesheet? I not sure before get more details.
Hello, I have the same issue (number 1) with table that doesn't take the whole width, see below :
I specified column width property as respectively: 5%, 31%,31%,31% :
I tried to remove the b-container but it's the same, any idea please ?
THIS FIX THE ISSUE OF THE RESPONSIVE
::v-deep(.vtl-table){ display: table !important; }
Please fix the code @linmasahiro
Hello, I have the same issue (number 1) with table that doesn't take the whole width, see below :
THIS FIX THE ISSUE OF THE RESPONSIVE
::v-deep(.vtl-table){ display: table !important; }
Please fix the code @linmasahiro
Hi @overbost , I can't implement same problem. Give me more details or implement on Codepen or else.