n-table

name	n-table
description	A basic table component for rendering simple HTML tables with styling options including borders, stripes, and size variations.
author	jiaiyan
version	1.0.0

n-table Component

The n-table component is Naive UI's basic table solution for rendering simple HTML tables. For structured data with sorting, filtering, and pagination, use n-data-table instead.

When to Use

Use n-table when you need to:

• Render basic static tables
• Display simple tabular data without complex interactions
• Create styled HTML tables with minimal configuration
• Build custom table layouts with full control over content

Basic Usage

Simple Table

<template>
  <n-table :bordered="false" :single-line="false">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Address</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John Brown</td>
        <td>32</td>
        <td>New York No. 1 Lake Park</td>
      </tr>
      <tr>
        <td>Jim Green</td>
        <td>42</td>
        <td>London No. 1 Lake Park</td>
      </tr>
    </tbody>
  </n-table>
</template>

Bordered Table

<template>
  <n-table :single-line="false">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Address</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John Brown</td>
        <td>32</td>
        <td>New York No. 1 Lake Park</td>
      </tr>
    </tbody>
  </n-table>
</template>

Striped Table

<template>
  <n-table striped>
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Address</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John Brown</td>
        <td>32</td>
        <td>New York No. 1 Lake Park</td>
      </tr>
      <tr>
        <td>Jim Green</td>
        <td>42</td>
        <td>London No. 1 Lake Park</td>
      </tr>
      <tr>
        <td>Joe Black</td>
        <td>38</td>
        <td>Sidney No. 1 Lake Park</td>
      </tr>
    </tbody>
  </n-table>
</template>

Different Sizes

<template>
  <n-space vertical>
    <n-table :bordered="false" :single-line="false" size="small">
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Small</td>
          <td>Size</td>
        </tr>
      </tbody>
    </n-table>
    
    <n-table :bordered="false" :single-line="false" size="large">
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Large</td>
          <td>Size</td>
        </tr>
      </tbody>
    </n-table>
  </n-space>
</template>

Single Column (No Row Borders)

<template>
  <n-table single-column :single-line="false">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Address</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John Brown</td>
        <td>32</td>
        <td>New York No. 1 Lake Park</td>
      </tr>
    </tbody>
  </n-table>
</template>

API Reference

Props

Name	Type	Default	Description
bordered	boolean	true	Whether to show table border
bottom-bordered	boolean	true	The bottom border of the table (invalid when bordered is true)
single-column	boolean	false	Whether rows are not divided (no border-bottom on cells)
single-line	boolean	true	Whether columns are not divided (no border-right on cells)
size	'small' | 'medium' | 'large'	'medium'	Table size
striped	boolean	false	Whether to show zebra stripes on rows

Sub-components

You can use n-table, n-thead, n-tbody, n-tr, n-th and n-td. These sub-components can be used to reduce the granularity of dependency collecting.

Common Patterns

Table with Custom Styling

<template>
  <n-table striped :bordered="false">
    <thead>
      <tr>
        <th>Product</th>
        <th>Price</th>
        <th>Stock</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in products" :key="item.id">
        <td>{{ item.name }}</td>
        <td>{{ item.price }}</td>
        <td>{{ item.stock }}</td>
      </tr>
    </tbody>
  </n-table>
</template>

<script setup>
import { ref } from 'vue'

const products = ref([
  { id: 1, name: 'Apple', price: '$1.00', stock: 100 },
  { id: 2, name: 'Banana', price: '$0.50', stock: 200 },
  { id: 3, name: 'Orange', price: '$0.75', stock: 150 }
])
</script>

Nested Table

<template>
  <n-table>
    <thead>
      <tr>
        <th>Category</th>
        <th>Items</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Fruits</td>
        <td>
          <n-table size="small">
            <tbody>
              <tr><td>Apple</td></tr>
              <tr><td>Banana</td></tr>
            </tbody>
          </n-table>
        </td>
      </tr>
    </tbody>
  </n-table>
</template>

Best Practices

1. Use n-data-table for Complex Data

For structured data with sorting, filtering, or pagination, use n-data-table instead:

<n-data-table :columns="columns" :data="data" />

2. Combine with Other Components

Use n-table with n-card for better presentation:

<n-card title="User List">
  <n-table striped>
    <!-- table content -->
  </n-table>
</n-card>

3. Use Appropriate Border Styles

• Use bordered for clear cell separation
• Use single-line for cleaner look without column borders
• Use single-column for compact row display

4. Responsive Tables

Wrap tables in scrollable containers for mobile compatibility:

<div style="overflow-x: auto;">
  <n-table>
    <!-- wide table content -->
  </n-table>
</div>