README.en-US.md

---

X Naive UI

An extension to the Naive-UI component library.

Enables slots and template style for DataTable / Dropdown / Menu / Select / Tree.

English | 中文

---

Introduction

Naive-UI is a popular Vue 3 component library.

Due to the maintainability, the official team does not provide slots or template style APIs for DataTable, Dropdown, Menu, Select, Cascader, Tree, TreeSelect etc..

Here are some related issues on GitHub:

• #205: 增加数据表格展开功能的插槽
• #216: table 使用 template 风格的 API
• #307: NDataTable 和 NTree 组件能够支持使用插槽渲染吗？
• #520: NDropdown support template option
• #1136: 你认同 DataTable 的设计方案么？
• #2054: 是否考虑将组件中的 h 函数调整为 template 插槽
• #2252: 建议 DataTable 组件支持自定义列模板
• #3337: 使用 h 渲染函数的建议
• #4273: DataTable 增加 template 支持
• #4663: 希望 Dropdown 可以增加 slots 插槽
• #5065: n-data-table slot for row or component for column
• #5134: datatable 请求提供对外的列插槽，或者 render 提供 jsx 的形式，不必使用 h 函数

This project is aimed to provide a solution for these issues above.

---

Features

• Almost the same API to Naive-UI. You just need to add x- before the original component name (example: <n-data-table> → <x-n-data-table>).
• DataTable: Slots for colums, cells, expandable rows.
• Dropdown: Template style API for options.
• Menu: Template style API for options.
• Select: Template style API for options, option groups. Slots for options, tags.
• Cascader: Slots for options.

---

Getting Started

1. Installation

Use pnpm or other package manager to install:

> pnpm install naive-ui
> pnpm install @skit/x.naive-ui

2. Components Registration

If you use Vue's default template syntax, you need to register components before you can use them. There are three ways to register components:

2.1. Global Registration All Components

import { createApp } from 'vue';
import XNaiveUI from '@skit/naive-ui';

const app = createApp(App);
app.use(XNaiveUI);

2.2. Global Registration Some Components

import { createApp } from 'vue';
import { XNDataTable } from '@skit/naive-ui';

const app = createApp(App);
app.use(XNDataTable);

2.3. Local Registration

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

<script>
    import { XNDataTable } from '@skit/naive-ui';

    export default {
        components: {
            XNDataTable
        }
    };
</script>

3. Usage

Please view the Documentation.

4. Demo

You can run the demo to view more details.

> pnpm install    # install dependencies
> pnpm run build  # build
> pnpm run demo   # run demo, then visit http://localhost:8888/

---

Road Map

• DataTable: Slots
• DataTable: Template style API
• Dropdown: Slots
• Menu
• Select
• Cascader
• Tree
• TreeSelect