Unable to get table width to be responsive and fixed first column in table header not fixed #75

nosizejosh · 2023-01-25T12:20:44Z

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>

The text was updated successfully, but these errors were encountered:

linmasahiro · 2023-01-27T01:55:19Z

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.

nosizejosh · 2023-01-27T11:46:35Z

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>

nosizejosh · 2023-01-27T12:35:47Z

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

linmasahiro · 2023-01-30T09:15:38Z

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

nosizejosh · 2023-02-01T20:10:39Z

@linmasahiro I have run nuxt 3 here but it fails to run after installing table-lite

linmasahiro · 2023-02-02T02:21:13Z

@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

nosizejosh · 2023-02-02T10:12:06Z

@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

nosizejosh · 2023-02-02T10:32:24Z

I have been able to reproduce issue 3. The ID column header which is part of the fixed column moves on horizontal scroll.

linmasahiro · 2023-02-02T14:18:00Z

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
...

nosizejosh · 2023-02-03T12:08:02Z

issue 3 reproduced here with your sandox

linmasahiro · 2023-02-04T09:20:35Z

Hi, @nosizejosh
I already fixed this bug, thanks for your ticket. Please upgrade to v1.3.2 and close this issue if no problem.

linmasahiro · 2023-02-09T00:01:59Z

Hi, @nosizejosh , is this issue resolved now?

nosizejosh · 2023-02-11T16:42:13Z

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>

linmasahiro · 2023-02-13T02:33:48Z

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;
}

cams03 · 2023-02-22T09:55:55Z

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 ?

linmasahiro · 2023-03-01T00:24:55Z

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.

overbost · 2024-01-16T18:01:07Z

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 ?

THIS FIX THE ISSUE OF THE RESPONSIVE

::v-deep(.vtl-table){
display: table !important;
}

Please fix the code @linmasahiro

linmasahiro · 2024-01-17T06:40:43Z

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 ?

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.

linmasahiro added the bug Something isn't working label Feb 3, 2023

linmasahiro closed this as completed in 144ed4b Feb 4, 2023

linmasahiro reopened this Feb 4, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Unable to get table width to be responsive and fixed first column in table header not fixed #75

Unable to get table width to be responsive and fixed first column in table header not fixed #75

nosizejosh commented Jan 25, 2023

linmasahiro commented Jan 27, 2023

nosizejosh commented Jan 27, 2023 •

edited

Loading

nosizejosh commented Jan 27, 2023

linmasahiro commented Jan 30, 2023

nosizejosh commented Feb 1, 2023

linmasahiro commented Feb 2, 2023

nosizejosh commented Feb 2, 2023

nosizejosh commented Feb 2, 2023

linmasahiro commented Feb 2, 2023 •

edited

Loading

nosizejosh commented Feb 3, 2023

linmasahiro commented Feb 4, 2023

linmasahiro commented Feb 9, 2023

nosizejosh commented Feb 11, 2023

linmasahiro commented Feb 13, 2023

cams03 commented Feb 22, 2023

linmasahiro commented Mar 1, 2023

overbost commented Jan 16, 2024

linmasahiro commented Jan 17, 2024

Unable to get table width to be responsive and fixed first column in table header not fixed #75

Unable to get table width to be responsive and fixed first column in table header not fixed #75

Comments

nosizejosh commented Jan 25, 2023

linmasahiro commented Jan 27, 2023

nosizejosh commented Jan 27, 2023 • edited Loading

nosizejosh commented Jan 27, 2023

linmasahiro commented Jan 30, 2023

nosizejosh commented Feb 1, 2023

linmasahiro commented Feb 2, 2023

nosizejosh commented Feb 2, 2023

nosizejosh commented Feb 2, 2023

linmasahiro commented Feb 2, 2023 • edited Loading

nosizejosh commented Feb 3, 2023

linmasahiro commented Feb 4, 2023

linmasahiro commented Feb 9, 2023

nosizejosh commented Feb 11, 2023

linmasahiro commented Feb 13, 2023

cams03 commented Feb 22, 2023

linmasahiro commented Mar 1, 2023

overbost commented Jan 16, 2024

linmasahiro commented Jan 17, 2024

nosizejosh commented Jan 27, 2023 •

edited

Loading

linmasahiro commented Feb 2, 2023 •

edited

Loading