ADUANASOFT/plantillas-proyectos
13
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(table): add overflow handling and className support for table columns

Browse Source
This commit is contained in:
Galindo97
2026-01-21 15:44:54 -06:00
parent ce8712436e
commit e28a81c07c
4 changed files with 30 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app.css
View File

@@ -118,6 +118,6 @@
@apply border-border outline-ring/50;
}
body {
@apply bg-background text-foreground;
@apply bg-background text-foreground overflow-x-hidden;
}
}

22
frontend/src/lib/components/dashboard/pedimentos/columns.ts
View File

@@ -4,6 +4,13 @@ import { createRawSnippet } from "svelte";
import DataTableActions from "./data-table-actions.svelte";
import type { Pedimento } from "$lib/api/dashboard/a76/pedimentos";
// Extender el tipo ColumnMeta para incluir className
declare module "@tanstack/table-core" {
interface ColumnMeta<TData extends unknown, TValue> {
className?: string;
}
}
/**
* Formatea un número como moneda
*/
@@ -120,6 +127,7 @@ export function createColumns(onSuccess?: () => void): ColumnDef<Pedimento>[] {
{
accessorKey: "pedimento_type",
header: "Tipo",
meta: { className: "hidden md:table-cell" },
cell: ({ row }) => {
const typeSnippet = createRawSnippet<[{ type?: string | null }]>((getType) => {
const { type } = getType();
@@ -134,6 +142,7 @@ export function createColumns(onSuccess?: () => void): ColumnDef<Pedimento>[] {
{
accessorKey: "pedimento_code",
header: "Clave",
meta: { className: "hidden lg:table-cell" },
cell: ({ row }) => {
const codeSnippet = createRawSnippet<[{ code?: string | null }]>((getCode) => {
const { code } = getCode();
@@ -148,6 +157,7 @@ export function createColumns(onSuccess?: () => void): ColumnDef<Pedimento>[] {
{
accessorKey: "regime",
header: "Régimen",
meta: { className: "hidden lg:table-cell" },
cell: ({ row }) => {
const regimeSnippet = createRawSnippet<[{ regime?: string | null }]>((getRegime) => {
const { regime } = getRegime();
@@ -162,6 +172,7 @@ export function createColumns(onSuccess?: () => void): ColumnDef<Pedimento>[] {
{
accessorKey: "pedimento_dates.start_date",
header: "Fecha Inicio",
meta: { className: "hidden xl:table-cell" },
cell: ({ row }) => {
const dateSnippet = createRawSnippet<[{ date: string }]>((getDate) => {
const { date } = getDate();
@@ -176,6 +187,7 @@ export function createColumns(onSuccess?: () => void): ColumnDef<Pedimento>[] {
{
accessorKey: "pedimento_dates.end_date",
header: "Fecha Final",
meta: { className: "hidden xl:table-cell" },
cell: ({ row }) => {
const dateSnippet = createRawSnippet<[{ date: string }]>((getDate) => {
const { date } = getDate();
@@ -190,6 +202,7 @@ export function createColumns(onSuccess?: () => void): ColumnDef<Pedimento>[] {
{
accessorKey: "pedimento_dates.payment_date",
header: "Fecha de Pago",
meta: { className: "hidden xl:table-cell" },
cell: ({ row }) => {
const dateSnippet = createRawSnippet<[{ date: string }]>((getDate) => {
const { date } = getDate();
@@ -204,6 +217,7 @@ export function createColumns(onSuccess?: () => void): ColumnDef<Pedimento>[] {
{
accessorKey: "pedimento_config_update_rectification.pediment_rectifed_18",
header: "Pedimento 18",
meta: { className: "hidden lg:table-cell" },
cell: ({ row }) => {
const ped18Snippet = createRawSnippet<[{ value?: string | null }]>((getValue) => {
const { value } = getValue();
@@ -218,6 +232,7 @@ export function createColumns(onSuccess?: () => void): ColumnDef<Pedimento>[] {
{
accessorKey: "pedimento_config_update_rectification.r1",
header: "Pedimento R1",
meta: { className: "hidden lg:table-cell" },
cell: ({ row }) => {
const r1Snippet = createRawSnippet<[{ value?: string | null }]>((getValue) => {
const { value } = getValue();
@@ -232,6 +247,7 @@ export function createColumns(onSuccess?: () => void): ColumnDef<Pedimento>[] {
{
accessorKey: "pedimento_validation.electronic_signature",
header: "Acuse Electrónico",
meta: { className: "hidden xl:table-cell" },
cell: ({ row }) => {
const ackSnippet = createRawSnippet<[{ value?: string | null }]>((getValue) => {
const { value } = getValue();
@@ -249,6 +265,7 @@ export function createColumns(onSuccess?: () => void): ColumnDef<Pedimento>[] {
{
accessorKey: "pedimento_payments.total_contributions",
header: "¿Se pagó el impuesto?",
meta: { className: "hidden xl:table-cell" },
cell: ({ row }) => {
const paidSnippet = createRawSnippet<[{ value?: string | null }]>((getValue) => {
const { value } = getValue();
@@ -266,6 +283,7 @@ export function createColumns(onSuccess?: () => void): ColumnDef<Pedimento>[] {
{
accessorKey: "client_id",
header: "Cliente",
meta: { className: "hidden md:table-cell" },
cell: ({ row }) => {
const clientSnippet = createRawSnippet<[{ clientId?: number | null }]>((getClient) => {
const { clientId } = getClient();
@@ -309,6 +327,7 @@ export function createColumns(onSuccess?: () => void): ColumnDef<Pedimento>[] {
});
return renderSnippet(headerSnippet, {});
},
meta: { className: "hidden lg:table-cell" },
cell: ({ row }) => {
const valueSnippet = createRawSnippet<[{ value: string }]>((getValue) => {
const { value } = getValue();
@@ -330,6 +349,7 @@ export function createColumns(onSuccess?: () => void): ColumnDef<Pedimento>[] {
});
return renderSnippet(headerSnippet, {});
},
meta: { className: "hidden xl:table-cell" },
cell: ({ row }) => {
const priceSnippet = createRawSnippet<[{ price: string }]>((getPrice) => {
const { price } = getPrice();
@@ -351,6 +371,7 @@ export function createColumns(onSuccess?: () => void): ColumnDef<Pedimento>[] {
});
return renderSnippet(headerSnippet, {});
},
meta: { className: "hidden lg:table-cell" },
cell: ({ row }) => {
const weightSnippet = createRawSnippet<[{ weight: string }]>((getWeight) => {
const { weight } = getWeight();
@@ -365,6 +386,7 @@ export function createColumns(onSuccess?: () => void): ColumnDef<Pedimento>[] {
{
accessorKey: "created_at",
header: "Fecha de Creación",
meta: { className: "hidden 2xl:table-cell" },
cell: ({ row }) => {
const dateSnippet = createRawSnippet<[{ date: string }]>((getDate) => {
const { date } = getDate();

10
frontend/src/lib/components/dashboard/pedimentos/data-table.svelte
View File

@@ -60,13 +60,13 @@
</script>
<div class="w-full">
<div class="rounded-md border max-h-[600px] overflow-y-auto" bind:this={scrollContainer}>
<Table.Root>
<Table.Header class="bg-background">
<div class="rounded-md border max-h-[600px] overflow-auto" bind:this={scrollContainer}>
<Table.Root class="w-full">
<Table.Header class="bg-background sticky top-0 z-10">
{#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
<Table.Row>
{#each headerGroup.headers as header (header.id)}
<Table.Head>
<Table.Head class="whitespace-nowrap {header.column.columnDef.meta?.className || ''}">
{#if !header.isPlaceholder}
<FlexRender
content={header.column.columnDef.header}
@@ -82,7 +82,7 @@
{#each table.getRowModel().rows as row (row.id)}
<Table.Row data-state={row.getIsSelected() && "selected"}>
{#each row.getVisibleCells() as cell (cell.id)}
<Table.Cell>
<Table.Cell class="whitespace-nowrap {cell.column.columnDef.meta?.className || ''}">
<FlexRender
content={cell.column.columnDef.cell}
context={cell.getContext()}

4
frontend/src/routes/dashboard/+layout.svelte
View File

@@ -33,7 +33,7 @@
<Sidebar.Provider>
<AppSidebar />
<Sidebar.Inset>
<Sidebar.Inset class="overflow-x-hidden">
<header
class="group-has-data-[collapsible=icon]/sidebar-wrapper:h-12 flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear"
>
@@ -55,7 +55,7 @@
-->
</div>
</header>
<div class="flex flex-1 flex-col gap-4 p-4 pt-0">
<div class="flex flex-1 flex-col gap-4 p-4 pt-0 overflow-x-hidden">
<!-- Contenido de cada página -->
{@render children()}
</div>