---
title: "Appearance"
description: "Component style overrides, pagination style overrides, stripe and borders, visual density, fit-content width, empty-cell placeholders and sticky header."
canonical_url: "https://nuxt.mhaibaraai.cn/en/docs/data-table/appearance"
---
# Appearance

> Component style overrides, pagination style overrides, stripe and borders, visual density, fit-content width, empty-cell placeholders and sticky header.

## `ui` Component Style Overrides

The `ui` prop accepts a slot-class map that deep-merges with the theme, allowing you to customize `root`, `th`, `td`, `tbody` and other partial styles:

```vue [DataTableUiOverrideExample.vue]
<script setup lang="ts">
import type { DataTableColumn, DataTableProps } from '@movk/nuxt'
import type { Person } from '~/composables/useTableMock'

const data = makePeople(6)
const columns: DataTableColumn<Person>[] = [
  { accessorKey: 'name', header: '姓名' },
  { accessorKey: 'department', header: '部门' },
  { accessorKey: 'role', header: '岗位' },
  { accessorKey: 'level', header: '职级' }
]

const customUi: DataTableProps<Person>['ui'] = {
  root: 'rounded-xl shadow-sm',
  th: 'bg-primary/10 text-primary font-semibold',
  td: 'py-3 text-default',
  tbody: 'divide-y divide-default'
}
</script>

<template>
  <MDataTable :data="data" :columns="columns" :ui="customUi" />
</template>
```

## `paginationUi` Pagination Style Overrides

`paginationUi.ui` accepts Pagination theme slots and can override `root`, `summary`, `actions`, `selectedCount` and other partial classes. `paginationUi` also supports configuring `show` and `pageSizes`:

```vue [DataTablePaginationUiExample.vue]
<script setup lang="ts">
import type { DataTableColumn, PaginationState, RowSelectionState } from '@movk/nuxt'
import type { Person } from '~/composables/useTableMock'

const data = makePeople(8)
const selection = ref<RowSelectionState>({ P0002: true })
const pagination = ref<PaginationState>({ pageIndex: 0, pageSize: 4 })
const columns: DataTableColumn<Person>[] = [
  { type: 'selection', mode: 'multiple' },
  { accessorKey: 'name', header: '姓名' },
  { accessorKey: 'department', header: '部门' },
  { accessorKey: 'role', header: '岗位' }
]
</script>

<template>
  <MDataTable
    v-model:row-selection="selection"
    v-model:pagination="pagination"
    :data="data"
    :columns="columns"
    row-key="id"
    :pagination-ui="{
      show: true,
      pageSizes: [4, 8],
      ui: {
        root: 'border-t border-default pt-3 mt-1',
        summary: 'text-primary font-medium',
        actions: 'gap-4',
        selectedCount: 'text-success'
      }
    }"
  />
</template>
```

## Stripe and Borders

`stripe` controls the background color of even rows; `bordered` supports both boolean and object forms — the object form lets you customize vertical borders via `color`, `width` and `style`:

```vue [DataTableStripeBorderedExample.vue]
<script setup lang="ts">
import type { DataTableColumn } from '@movk/nuxt'
import type { Person } from '~/composables/useTableMock'

const data = makePeople(6)
const columns: DataTableColumn<Person>[] = [
  { accessorKey: 'name', header: '姓名' },
  { accessorKey: 'department', header: '部门' },
  { accessorKey: 'role', header: '岗位' },
  { accessorKey: 'level', header: '职级' }
]
</script>

<template>
  <MDataTable :data="data" :columns="columns" />
</template>
```

## `density` Visual Density

`density` switches between three cell-padding presets: `compact`, `normal` and `comfortable`:

```vue [DataTableDensityExample.vue]
<script setup lang="ts">
import type { DataTableColumn } from '@movk/nuxt'
import type { Person } from '~/composables/useTableMock'

const data = makePeople(6)
const columns: DataTableColumn<Person>[] = [
  { accessorKey: 'name', header: '姓名' },
  { accessorKey: 'department', header: '部门' },
  { accessorKey: 'role', header: '岗位' },
  { accessorKey: 'level', header: '职级' }
]
</script>

<template>
  <MDataTable :data="data" :columns="columns" />
</template>
```

## `fitContent` Fit-Content Width

`fitContent` makes the table width determined by column widths rather than stretching to fill the parent container — suitable for compact utility tables:

```vue [DataTableFitContentExample.vue]
<script setup lang="ts">
import type { DataTableColumn } from '@movk/nuxt'
import type { Person } from '~/composables/useTableMock'

const data = makePeople(4)
const columns: DataTableColumn<Person>[] = [
  { accessorKey: 'id', header: '工号' },
  { accessorKey: 'name', header: '姓名' },
  { accessorKey: 'department', header: '部门' },
  { accessorKey: 'level', header: '职级' }
]
</script>

<template>
  <MDataTable :data="data" :columns="columns" bordered />
</template>
```

## `emptyCell` Empty-Value Placeholder

`emptyCell` supports a string, a function template (returning a VNode) and `false`, respectively for custom text, a custom node and disabling the placeholder entirely. A per-column `emptyCell` takes precedence over the global setting:

```vue [DataTableEmptyCellVariantsExample.vue]
<script setup lang="ts">
import type { DataTableColumn, DataTableProps } from '@movk/nuxt'
import type { Person } from '~/composables/useTableMock'
import { UBadge, UIcon } from '#components'

const vnodeCell: DataTableProps<Person>['emptyCell'] = () =>
  h(UBadge, { color: 'neutral', variant: 'subtle', size: 'sm' }, () => [
    h(UIcon, { name: 'i-lucide-minus', class: 'size-3' }),
    ' 暂无'
  ])

const columns: DataTableColumn<Person>[] = [
  { accessorKey: 'name', header: '姓名' },
  { accessorKey: 'address', header: '住址', size: 200 },
  { accessorKey: 'bio', header: '简介', size: 220, emptyCell: vnodeCell }
]

const data: Person[] = makePeople(3).map((p, i) => ({
  ...p,
  bio: i % 2 === 0 ? '' : p.bio,
  address: i % 3 === 0 ? '' : p.address
}))
</script>

<template>
  <MDataTable :data="data" :columns="columns" />
</template>
```

## `sticky` Sticky Header

`sticky` is enabled by default; disabling it makes the header scroll with the content. It requires a scroll container with a constrained height (e.g. `ui.root: 'max-h-[40vh]'`):

```vue [DataTableStickyExample.vue]
<script setup lang="ts">
import type { DataTableColumn } from '@movk/nuxt'
import type { Person } from '~/composables/useTableMock'

const columns: DataTableColumn<Person>[] = [
  { accessorKey: 'name', header: '姓名' },
  { accessorKey: 'department', header: '部门' },
  { accessorKey: 'role', header: '岗位' },
  { accessorKey: 'level', header: '职级' }
]
</script>

<template>
  <MDataTable :data="makePeople(30)" :columns="columns" :ui="{ root: 'max-h-[40vh]' }" />
</template>
```


## Sitemap

See the full [sitemap](https://nuxt.mhaibaraai.cn/sitemap.md) for all pages.