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:

• #106 - Table support slot for customColumn
• #205 - 增加数据表格展开功能的插槽
• #216 - table 使用 template 风格的 API
• #307 - NDataTable 和 NTree 组件能够支持使用插槽渲染吗？
• #520 - NDropdown support template option
• #1136 - 你认同 DataTable 的设计方案么？
• #2054 - 是否考虑将组件中的 h 函数调整为 template 插槽
• #2252 - 建议 DataTable 组件支持自定义列模板
• #3337 - 使用 h 渲染函数的建议
• #3363 - 所有组件的 render 函数都删掉吧
• #3477 - 建议添加一个组件：菜单项
• #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.

🚀 This has been added to Awesome Naive-UI.

Features

• Almost the same API to Naive-UI (latest compatible version: v2.40.1). You just need to add x- before the original component name (example: <n-data-table> → <x-n-data-table>).
• DataTable: Scoped slots for columns, cells, expandable rows.
• DataTable: Template style API for columns, summary.
• Dropdown: Scoped slots for options, icons.
• Dropdown: Template style API for options, option groups.
• Menu: Template style API for options.
• Menu: Scoped slots for options, icons.
• Select: Template style API for options, option groups.
• Select: Scoped slots for options, tags.
• Popselect: Template style API for options, option groups.
• Popselect: Scoped slots for options.
• Cascader: Scoped slots for options.
• Tree: Scoped slots for options, switcher icon.
• TreeSelect: Scoped slots for options, tags, switcher icon.
• Button: Display as a square when only icon.

Documentation

Click here to view.

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/