I have a table which a toggle button above it to toggle between the condensed view of the table, and the full view of the table. I would like to have both rounded corners and sticky headers so both tables have the same feel, and the headers remain visible when the user scrolls down. And my condensed view of the table has both sticky headers and rounded corners. However, in my full view of the table, I have to take overflow-x-auto and overflow-hidden out to use sticky headers, which works but causes my table to have pointed corners. If I leave both overflow code in, then sticky doesn't work, but my table has rounded corners. How can I do this and have both in the full view of my table?
<div class="mt-4 flex flex-col">
<div class="-my-2 -mx-4 sm:-mx-6 lg:-mx-8">
<div class="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
<div class="w-full flex justify-center shadow ring-1 ring-black ring-opacity-5 md:rounded lg">
<table class="min-w-full border-separate divide-y divide-gray-200" style="border-spacing:0">
<thead class="bg-blue-600">
<tr class="divide-x divide-gray-200">
<th
scope="col"
class="w-1/3 px-3 py-3.5 text-center text-sm font-semibold text-white"
style="position:sticky; top:85px; background:#1e345d;"
>
Column 1
</th>
<th
scope="col"
class="w-1/2 px-3 py-3.5 text-center text-sm font-semibold text-white"
style="position:sticky; top:85px; background:#1e345d;"
>
Column 2
</th>
<th
scope="col"
class="w-1/4 px-3 py-3.5 text-center text-sm font-semibold text-white"
style="position:sticky; top:85px; background:#1e345d;"
>
Column 3
</th>
</tr>
</thead>
Related
I created a custom invoice but how can I add make the payment terms and total row at the bottom on the page? (see image for desired scenario)
<div class="clearfix" style="line-height:0">
<p t-if="o.narration" name="comment">
<span t-field="o.narration"/>
</p>
<p t-if="o.invoice_payment_term_id" name="payment_term" style="font-size:12px;margin-left:-120px;text-transform:uppercase;line-height:0">
Payment <b><span t-field="o.invoice_payment_term_id"/></b> after statement of accounts
<!--<span t-field="o.invoice_payment_term_id.note"/>-->
</p>
<p t-if="o.amount_total" style="font-size:12px;margin-left:-120px;text-transform:uppercase;line-height:normal">
<span t-esc="o.compute_amount_in_word(o.amount_total)"/>
</p>
<div id="total" class="row" style="margin-top:-30px !important;">
<div t-attf-class="#{'col-6' if report_type != 'html' else 'col-sm-7 col-md-6'} ml-auto">
<table class="table table-sm table-borderless" style="page-break-inside: avoid; width:222px; margin-left:235px !important;border-bottom: 4px solid white">
<tr>
<td class="text-right"><strong>TOTAL</strong></td>
<td style="" class="text-right">
<span class="text-nowrap text-right" style="" t-field="o.amount_total"/>
</td>
</tr>
</table>
</div>
</div>
</div>
Right now it's showing payment terms, amount in words, and total just below where the table ends. I tried to make the position: relative, but then it shows only on the first page and will overlap if the invoice is more than one page. (see image)
I'm new to Vue and have been using Vue 3 along with Tailwind css on a intro project. I am trying to use two v-if's along with a click button to switch between the tables, but it is only showing the scrollable table, and when I click the button it doesn't show anything.
This is my data:
<template>
<div class="px-4 sm:px-6 lg:px-8">
<div class="sm:items-center">
<div class="sm:flex-none">
<h1 class="text-xl font-semibold text-gray-900 text-center">Test</h1>
<p class="mt-2 text-sm text-gray-700 text-center">Dummy Data</p>
<div class="flex justify-center mt-6">
<button #click="toggleList" type="button" class="inline-flex items-center justify-center rounded-md border border-transparent bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:w-auto">Toggle List</button>
</div>
</div>
</div>
<br>
<div v-if="listIsVisible">
<div class='flex items-center justify-center'>
<div class='h-96 w-96 overflow-y-scroll flex justify-center'>
<table class='w-50 shadow-lg bg-white border-separate'>
<thead>
<tr class='bg-gray-100'>
<th class='w-20 px-4 py-2 bg-blue-600 text-white'>Column 1</th>
<th class='px-4 py-2 bg-blue-600 text-white'>Column 2</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200 bg-white">
<tr v-for="dummy in workflow" :key="dummy.contract">
<td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm text-black sm:pl-6 text-center">{{ dummy.contract }}</td>
<td class="whitespace-nowrap px-3 py-4 text-sm text-black text-center">{{ dummy.spend }}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div v-if="!listIsVisible">
<div class='flex items-center justify-center'>
<div class='overflow-y-scroll flex justify-center'>
<table class='w-50 shadow-lg bg-white border-separate'>
<thead>
<tr class='bg-gray-100'>
<th class='w-20 px-4 py-2 bg-blue-600 text-white'>Contract</th>
<th class='px-4 py-2 bg-blue-600 text-white'>Spend</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200 bg-white">
<tr v-for="dummy in raft" :key="dummy.contract">
<td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm text-black sm:pl-6 text-center">{{ dummy.contract }}</td>
<td class="whitespace-nowrap px-3 py-4 text-sm text-black text-center">{{ dummy.spend }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
const listIsVisible = ref(false);
function toggleList() {
listIsVisible.value = !listIsVisible.value;
}
I am using a modal screen to show a datatable that summarizes a client's restaurant order. It contains a couple of div's to provide info and the mentioned table with the order (ammount, description, value).
Then, that order will be printed in a 48mm width paper special printer (POS58 Printer)
I'am struggling on how to print this information. Modal is overflowing once I try to print the modal.
I have tried so far: -Using word-break, different font-sizes but I think I am missing something.
Printing in PDF or a normal printer works perfectly fine.
Any suggestions?
<div class="modal fade" id="print_comanda" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content border-0">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">XX Restaurant</h5>
</div>
<div class="modal-body">
<p class="font-weight-bold" style="text-align:center">Internal Ticket</p>
<div class="text mb-3">
<div id="table_nr" style="text-align:center; font-size: 2rem;"></div>
<div id="table_hs"></div>
<div id="table_dt"></div>
<div id="table_client"></div>
<div id="table_waiter"></div>
</div>
<table width="100%" id="table_final" class="table">
<thead>
<tr>
<th scope="col" class="text-center">Ammt.</th>
<th scope="col" class="text-center">Desc.</th>
<th scope="col" class="text-center">Subtot.</th>
<th scope="col" class="text-center">Total</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div id="nonPrintable2">
<div class="modal-footer">
<button type="button" id="cancel_a" class="btn btn-light" data-dismiss="modal">Cancel</button>
<button type="submit" id="btn_print" class="btn btn-dark">Print</button>
</div>
</div>
</div>
</div>
</div>
I cant align the datatable suppose to show that header and bottom must be equal but on the image below it seems it does not equal to each other
how to fix this datatable
Here is the sample code below i created to display the datatable
<div class="row" id='content'>
<div class="col-md-4 pull-left">
<div class="customCenter" >
<img class="img-responsive rounded chooseTicket rounded mx-auto d-block" src="https://www.w3schools.com/bootstrap/paris.jpg" alt="Generic placeholder image" >
</div>
<h2 class='chooseHeader'>Commendation</h2>
</div>
<div class=" " id='dataList'>
<div class="">
<table class="hover dataTable data-table test table-responsive" id="example" style="width:100%">
<thead>
<tr>
<th>Ticket Number</th>
<th>Details</th>
<th>Created Date</th>
<th>Status</th>
</tr>
</thead>
</table>
</div>
</div>
Sorry. An upside-down question. I have this table. That is clickable through iWasClicked function, but I also have the last td with clickable images (href). I want the last td to be only clickable through the images(href). Now, it triggers both. The href link and the iWasClicked from the tr.
<tr
class="bg-gray-100 text-dark text-center cursor-pointer hover:bg-gray-300"
v-for="currentView in getOrganizationsDashboard().projects"
:key="currentView.id"
#click="iWasClicked(currentView.projectName)"
>
<td class="px-4 py-3 border-b-2 border-dark">
<!-- {{ showProjectSuccessRunPercentage(currentView)}} -->
<img
class="w-10 inline-block align-middle"
:src="showProjectSuccessRunPercentage(currentView)"
alt="Organization Icon"
/>
</td>
<td class="px-4 py-3 border-b-2 border-dark">
{{ currentView["projectName"] }}
</td>
<td class="px-4 py-3 border-b-2 border-dark">
<a
class=" "
:href="
'https://xxx.us/org/' + currentView['projectName']
"
target="_blank"
><img
class="inline-block w-10"
alt=""
src="../assets/img/myLogo.svg"
/></a>
</td>
</tr>
You have to stop the click event from bubbling up and triggering a click on the tr, which you can do like this:
<a #click="$event.stopPropagation()"</a>
<a
class=" "
:href="'https://xxx.us/org/' + currentView['projectName']"
target="_blank"
#click.stop
>
<img class="inline-block w-10"
alt=""
src="../assets/img/myLogo.svg"/>
</a>
It is much better to use the provided Vue event modifiers for #click which is .stop. Like what Brother Woodrow answered, this will also stop the click event's propagation.
<tr #click.stop="iWasClicked(currentView.projectName)">