feat(data-table): add striped prop (tusen-ai#1591)

* feat(data-table): striped data table.

* test(data-table): add striped test, only checking class.

* docs(CHANGELOG, demo): add en demo docs, add CHANGELOG

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

CHANGELOG.en-US.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## Pending
+
+### Feats
+
+- `n-data-table` add `striped` prop, closes [#1552](https://github.com/TuSimple/naive-ui/issues/1552).
+
 ## 2.20.3 (2021-11-15)
 
 ### Fixes

CHANGELOG.zh-CN.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## Pending
+
+### Feats
+
+- `n-data-table` 新增 `striped` 属性，关闭 [#1552](https://github.com/TuSimple/naive-ui/issues/1552)
+
 ## 2.20.3 (2021-11-15)
 
 ### Fixes

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

@@ -40,6 +40,7 @@ virtual
 custom-filter-menu
 tree
 flex-height
+striped
 ```
 
 ## API

src/data-table/demos/enUS/striped.demo.md

@@ -0,0 +1,61 @@
+# Striped
+
+Using `striped` prop to make it easier to distinguish rows.
+
+```html
+<n-data-table :columns="columns" :data="data" :striped="true" />
+```
+
+```js
+import { defineComponent } from 'vue'
+
+const createColumns = () => {
+  return [
+    {
+      type: 'selection'
+    },
+    {
+      title: 'Name',
+      key: 'name'
+    },
+    {
+      title: 'Age',
+      key: 'age'
+    },
+    {
+      title: 'Address',
+      key: 'address'
+    }
+  ]
+}
+
+const createData = () => [
+  {
+    key: 0,
+    name: 'John Brown',
+    age: 32,
+    address: 'New York No. 1 Lake Park'
+  },
+  {
+    key: 1,
+    name: 'Jim Green',
+    age: 42,
+    address: 'London No. 1 Lake Park'
+  },
+  {
+    key: 2,
+    name: 'Joe Black',
+    age: 32,
+    address: 'Sidney No. 1 Lake Park'
+  }
+]
+
+export default defineComponent({
+  setup () {
+    return {
+      data: createData(),
+      columns: createColumns()
+    }
+  }
+})
+```

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

@@ -42,6 +42,7 @@ tree
 flex-height
 fixed-column-debug
 scroll-debug
+striped
 ```
 
 ## API

src/data-table/demos/zhCN/striped.demo.md

@@ -0,0 +1,61 @@
+# 条纹
+
+使用 `striped` 属性渲染条纹，使得表格明暗交替。
+
+```html
+<n-data-table :columns="columns" :data="data" :striped="true" />
+```
+
+```js
+import { defineComponent } from 'vue'
+
+const createColumns = () => {
+  return [
+    {
+      type: 'selection'
+    },
+    {
+      title: 'Name',
+      key: 'name'
+    },
+    {
+      title: 'Age',
+      key: 'age'
+    },
+    {
+      title: 'Address',
+      key: 'address'
+    }
+  ]
+}
+
+const createData = () => [
+  {
+    key: 0,
+    name: 'John Brown',
+    age: 32,
+    address: 'New York No. 1 Lake Park'
+  },
+  {
+    key: 1,
+    name: 'Jim Green',
+    age: 42,
+    address: 'London No. 1 Lake Park'
+  },
+  {
+    key: 2,
+    name: 'Joe Black',
+    age: 32,
+    address: 'Sidney No. 1 Lake Park'
+  }
+]
+
+export default defineComponent({
+  setup () {
+    return {
+      data: createData(),
+      columns: createColumns()
+    }
+  }
+})
+```

src/data-table/src/DataTable.tsx

@@ -77,6 +77,10 @@ export const dataTableProps = {
     type: Boolean as PropType<boolean | undefined>,
     default: undefined
   },
+  striped: {
+    type: Boolean as PropType<boolean | undefined>,
+    default: false
+  },
   scrollX: [Number, String] as PropType<string | number>,
   defaultCheckedRowKeys: {
     type: Array as PropType<RowKey[]>,
@@ -502,7 +506,8 @@ export default defineComponent({
             [`${mergedClsPrefix}-data-table--single-line`]: this.singleLine,
             [`${mergedClsPrefix}-data-table--single-column`]: this.singleColumn,
             [`${mergedClsPrefix}-data-table--loading`]: this.loading,
-            [`${mergedClsPrefix}-data-table--flex-height`]: this.flexHeight
+            [`${mergedClsPrefix}-data-table--flex-height`]: this.flexHeight,
+            [`${mergedClsPrefix}-data-table--striped`]: this.striped
           }
         ]}
         style={this.cssVars as CSSProperties}

src/data-table/src/styles/index.cssr.ts

@@ -303,6 +303,9 @@ export default c([
     cM('loading', [
       cB('data-table-wrapper', 'opacity: var(--opacity-loading);')
     ]),
+    cM('striped', [
+      cB('data-table-tr:nth-child(even)', [cB('data-table-td', 'background-color: var(--td-color-hover);')])
+    ]),
     cM('single-column', [
       cB('data-table-td', {
         borderBottom: '0 solid var(--merged-border-color)'

src/data-table/tests/DataTable.spec.tsx

@@ -1183,4 +1183,31 @@ describe('props.columns', () => {
       'width: 200px; min-width: 200px'
     )
   })
+
+  it('should work with `striped` prop', async () => {
+    const columns: DataTableColumns = [
+      {
+        title: 'Name',
+        key: 'name',
+        width: 100
+      },
+      {
+        title: 'Age',
+        key: 'age',
+        width: 200
+      }
+    ]
+    const data = new Array(5).fill(0).map((_, index) => {
+      return {
+        name: index,
+        age: index
+      }
+    })
+    const wrapper = mount(() => (
+      <NDataTable columns={columns} data={data} striped={true} />
+    ))
+    expect(wrapper.findAll('.n-data-table')[0].attributes('class')).toContain(
+      'n-data-table--striped'
+    )
+  })
 })