N
Nuxt•2mo ago
ekkohdev

Nuxt UI Table row height

I am new to Nuxt and Nuxt UI so I may well be missing something in the documentation, but how can I adjust the row height of the Table component?
2 Replies
kapa.ai
kapa.ai•2mo ago
Hi @ekkohdev. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To adjust the row height of the Nuxt UI Table component, you can customize the CSS classes applied to the table rows (tr) or table cells (td). The Table component supports a meta property for columns, where you can set custom classes or styles for td and th elements. You can also globally override the default row or cell padding via the theme configuration. 1. Per-Column Customization You can use the meta.class.td property in your column definitions to set a custom class for the table cells, which can control the row height via padding or height: 
const columns: TableColumn<Payment>[] = [
  {
    accessorKey: 'id',
    header: 'ID',
    meta: {
      class: {
        td: 'py-8' // Tailwind class for vertical padding, increases row height
      }
    }
  },
  // ...other columns
]
const columns: TableColumn<Payment>[] = [
  {
    accessorKey: 'id',
    header: 'ID',
    meta: {
      class: {
        td: 'py-8' // Tailwind class for vertical padding, increases row height
      }
    }
  },
  // ...other columns
]
This will apply the py-8 class to the cells in the "ID" column, increasing their height. You can use any valid class or even a custom class with your own CSS. 2. Global Theme Customization You can also adjust the default row or cell height for all tables by overriding the theme in your app.config.ts: 
export default defineAppConfig({
  ui: {
    table: {
      slots: {
        td: 'p-6 text-sm text-muted whitespace-nowrap', // Increase padding for all cells
        tr: 'h-20', // Set a fixed height for all rows (optional)
      }
    }
  }
})
export default defineAppConfig({
  ui: {
    table: {
      slots: {
        td: 'p-6 text-sm text-muted whitespace-nowrap', // Increase padding for all cells
        tr: 'h-20', // Set a fixed height for all rows (optional)
      }
    }
  }
})
Adjust the p-6 or h-20 values as needed for your design. This will affect all tables using the Nuxt UI Table component in your project. 3. Inline Style (Per-Row) If you want to set the height directly via style, you can use the meta.style.td property: 
meta: {
  style: {
    td: 'height: 60px;' // Set a fixed height for the cell
  }
}
meta: {
  style: {
    td: 'height: 60px;' // Set a fixed height for the cell
  }
}
--- Summary:
Adjust row height by customizing the td or tr classes/styles via the meta property in your column definitions, or by overriding the default theme in your configuration. There is no dedicated rowHeight prop, but these methods give you full control over row height through CSS classes or styles. For more details, see the Table columns documentation and theme customization in the official docs.<br> Docs: Table columns | Docs: Table theme ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@585064271654944791> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?