feat(data-table): add spin-props (#3979)

Co-authored-by: 07akioni <07akioni2@gmail.com>

CHANGELOG.en-US.md

@@ -24,6 +24,7 @@
 - `n-input` adds `count-graphemes` prop, closes [#3967](https://github.com/tusen-ai/naive-ui/issues/3967).
 - `n-cascader` adds `not-found` slot, closes [#3862](https://github.com/tusen-ai/naive-ui/issues/3862).
 - `n-avatar` adds `img-props` prop, closes [#3963](https://github.com/tusen-ai/naive-ui/issues/3963).
+- `n-data-table` adds `spin-props` prop, closes [#3649](https://github.com/tusen-ai/naive-ui/issues/3649).
 - `n-button` adds `render-icon` prop, closes [#4007](https://github.com/tusen-ai/naive-ui/issues/4007).
 - Add `n-equation` component.
 - `n-image` adds `previewed-img-props` prop.

CHANGELOG.zh-CN.md

@@ -24,6 +24,7 @@
 - `n-input` 新增 `count-graphemes` 属性，关闭 [#3967](https://github.com/tusen-ai/naive-ui/issues/3967)
 - `n-cascader` 新增 `not-found` slot，关闭 [#3862](https://github.com/tusen-ai/naive-ui/issues/3862)
 - `n-avatar` 新增 `img-props` 属性，关闭 [#3963](https://github.com/tusen-ai/naive-ui/issues/3963)
+- `n-data-table` 新增 `spin-props` 属性，关闭 [#3649](https://github.com/tusen-ai/naive-ui/issues/3649)
 - `n-button` 新增 `render-icon` 属性，关闭 [#4007](https://github.com/tusen-ai/naive-ui/issues/4007)
 - 新增 `n-equation` 组件
 - `n-image` 新增 `previewed-img-props` 属性

src/_internal/index.ts

@@ -4,6 +4,7 @@ export { NBaseClose } from './close'
 export { NBaseIcon } from './icon'
 export { default as NBaseFocusDetector } from './focus-detector'
 export { default as NBaseLoading } from './loading'
+export type { BaseLoadingProps } from './loading'
 export { default as NInternalSelectMenu } from './select-menu'
 export type { InternalSelectMenuRef } from './select-menu'
 export { default as NBaseWave } from './wave'

src/_internal/loading/index.ts

@@ -1 +1,2 @@
 export { default } from './src/Loading'
+export type { BaseLoadingProps } from './src/Loading'

src/_internal/loading/src/Loading.tsx

@@ -1,8 +1,30 @@
 import { h, defineComponent, toRef } from 'vue'
 import { useStyle } from '../../../_mixins'
+import { ExtractPublicPropTypes } from '../../../_utils'
 import NIconSwitchTransition from '../../icon-switch-transition'
 import style from './styles/index.cssr'
 
+const baseLoadingProps = {
+  scale: {
+    type: Number,
+    default: 1
+  },
+  radius: {
+    type: Number,
+    default: 100
+  },
+  strokeWidth: {
+    type: Number,
+    default: 28
+  },
+  stroke: {
+    type: String,
+    default: undefined
+  }
+}
+
+export type BaseLoadingProps = ExtractPublicPropTypes<typeof baseLoadingProps>
+
 export default defineComponent({
   name: 'BaseLoading',
   props: {
@@ -10,26 +32,11 @@ export default defineComponent({
       type: String,
       required: true
     },
-    scale: {
-      type: Number,
-      default: 1
-    },
-    radius: {
-      type: Number,
-      default: 100
-    },
-    strokeWidth: {
-      type: Number,
-      default: 28
-    },
-    stroke: {
-      type: String,
-      default: undefined
-    },
     show: {
       type: Boolean,
       default: true
-    }
+    },
+    ...baseLoadingProps
   },
   setup (props) {
     useStyle('-base-loading', style, toRef(props, 'clsPrefix'))

src/data-table/demos/enUS/index.demo-entry.md

@@ -96,6 +96,7 @@ render-cell.vue
 | single-column | `boolean` | `false` | Whether rows are not divided. If the prop is `true`, table cell has no `border-bottom`. |  |
 | single-line | `boolean` | `true` | Whether columns are not divided. If the prop is `true`, table cell has no `border-right`. |  |
 | size | `'small' \| 'medium' \| 'large'` | `'medium'` | Table size. |  |
+| spin-props | `{ scale?: number, radius?: number, strokeWidth?: number, stroke?: string }` | `undefined` | Table spin's props. | NEXT_VERSION |
 | sticky-expanded-rows | `boolean` | `false` | Expanded row content remains sticky. | 2.32.2 |
 | striped | `boolean` | `false` | Whether to show zebra stripes on rows. |  |
 | summary | `DataTableCreateSummary` | `undefined` | Data of table summary row. For types, see <n-a href="#DataTableCreateSummary-Type">DataTableCreateSummary Type</n-a>. |  |

src/data-table/demos/zhCN/index.demo-entry.md

@@ -104,6 +104,7 @@ expandable-debug.vue
 | single-column | `boolean` | `false` | 是否不设定行的分割线，当参数为`true`时，则单元格没有下边线 |  |
 | single-line | `boolean` | `true` | 是否不设定列的分割线，当参数值为 `true` 时，则单元格没有右边线 |  |
 | size | `'small' \| 'medium' \| 'large'` | `'medium'` | 表格的尺寸 |  |
+| spin-props | `{ scale?: number, radius?: number, strokeWidth?: number, stroke?: string }` | `undefined` | 表格 spin 的属性 | NEXT_VERSION |
 | sticky-expanded-rows | `boolean` | `false` | 展开行是否不随表格横向滚动 | 2.32.2 |
 | striped | `boolean` | `false` | 是否使用斑马线条纹 |  |
 | summary | `DataTableCreateSummary` | `undefined` | 表格总结栏的数据，类型见 <n-a href="#DataTableCreateSummary-Type">DataTableCreateSummary Type</n-a> |  |

src/data-table/src/DataTable.tsx

@@ -401,7 +401,7 @@ export default defineComponent({
     }
   },
   render () {
-    const { mergedClsPrefix, themeClass, onRender, $slots } = this
+    const { mergedClsPrefix, themeClass, onRender, $slots, spinProps } = this
     onRender?.()
     return (
       <div
@@ -441,6 +441,7 @@ export default defineComponent({
                     <NBaseLoading
                       clsPrefix={mergedClsPrefix}
                       strokeWidth={20}
+                      {...spinProps}
                     />
                 ])
                 : null

src/data-table/src/interface.ts

@@ -18,6 +18,7 @@ import { createInjectionKey } from '../../_utils'
 import type { PaginationProps } from '../../pagination'
 import type { DataTableTheme } from '../styles'
 import type { RowItem, ColItem } from './use-group-header'
+import { BaseLoadingProps } from '../../_internal'
 
 export const dataTableProps = {
   ...(useTheme.props as ThemeProps<DataTableTheme>),
@@ -119,6 +120,7 @@ export const dataTableProps = {
   (value: any, rowData: object, column: TableBaseColumn) => VNodeChild
   >,
   renderExpandIcon: Function as PropType<() => VNodeChild>,
+  spinProps: { type: Object as PropType<BaseLoadingProps>, default: {} },
   onLoad: Function as PropType<DataTableOnLoad>,
   'onUpdate:page': [Function, Array] as PropType<
   PaginationProps['onUpdate:page']