mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-18 12:34:25 +08:00
refactor(table): rename advanced table to data-table
This commit is contained in:
07akioni
parent
532b44cb81
commit
e332b42cda
@ -231,14 +231,14 @@ export default {
|
||||
name: 'Data Display Components',
|
||||
group: true,
|
||||
childItems: [
|
||||
{
|
||||
name: 'Table',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-table'
|
||||
},
|
||||
{
|
||||
name: 'Code',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-code'
|
||||
},
|
||||
{
|
||||
name: 'DataTable',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-data-table'
|
||||
},
|
||||
{
|
||||
name: 'Descriptions',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-descriptions'
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
>
|
||||
<n-button @click="clearFiltersAndSorters">clear filters and sorters</n-button>
|
||||
|
||||
<n-advanced-table
|
||||
<n-data-table
|
||||
style="margin-top:10px;"
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
@ -18,7 +18,7 @@
|
||||
:pagination="pagination"
|
||||
@on-change="onChange"
|
||||
>
|
||||
</n-advanced-table>
|
||||
</n-data-table>
|
||||
```
|
||||
|
||||
```js
|
||||
@ -1,7 +1,7 @@
|
||||
# Async filter items
|
||||
|
||||
```html
|
||||
<n-advanced-table
|
||||
<n-data-table
|
||||
style="margin-top:10px;"
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
@ -9,7 +9,7 @@
|
||||
:pagination="pagination"
|
||||
@on-change="onChange"
|
||||
>
|
||||
</n-advanced-table>
|
||||
</n-data-table>
|
||||
```
|
||||
|
||||
```js
|
||||
@ -1,13 +1,13 @@
|
||||
# Basic Usage
|
||||
|
||||
```html
|
||||
<n-advanced-table
|
||||
<n-data-table
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
:pagination="pagination"
|
||||
>
|
||||
</n-advanced-table>
|
||||
</n-data-table>
|
||||
```
|
||||
|
||||
```js
|
||||
@ -9,7 +9,7 @@
|
||||
>
|
||||
<n-button @click="clearFiltersAndSorters">clear filters and sorters</n-button>
|
||||
|
||||
<n-advanced-table
|
||||
<n-data-table
|
||||
style="margin-top:10px;"
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
@ -20,7 +20,7 @@
|
||||
scroll-x="1500px"
|
||||
@on-change="onChange"
|
||||
>
|
||||
</n-advanced-table>
|
||||
</n-data-table>
|
||||
```
|
||||
|
||||
```js
|
||||
@ -6,24 +6,24 @@
|
||||
```html
|
||||
Custom row styles:
|
||||
|
||||
<n-advanced-table
|
||||
<n-data-table
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
:pagination="pagination"
|
||||
:row-class-name="rowClassName"
|
||||
>
|
||||
</n-advanced-table>
|
||||
</n-data-table>
|
||||
|
||||
Custom column styles:
|
||||
|
||||
<n-advanced-table
|
||||
<n-data-table
|
||||
ref="table"
|
||||
:columns="columns1"
|
||||
:data="data"
|
||||
:pagination="pagination"
|
||||
>
|
||||
</n-advanced-table>
|
||||
</n-data-table>
|
||||
```
|
||||
|
||||
```js
|
||||
@ -3,13 +3,13 @@
|
||||
> Ellipsize cell content via setting `column.ellipsis`.
|
||||
|
||||
```html
|
||||
<n-advanced-table
|
||||
<n-data-table
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
:pagination="pagination"
|
||||
>
|
||||
</n-advanced-table>
|
||||
</n-data-table>
|
||||
```
|
||||
|
||||
```js
|
||||
@ -11,7 +11,7 @@
|
||||
|
||||
<n-button @click="tryRoute">try set default by router query</n-button>
|
||||
|
||||
<n-advanced-table
|
||||
<n-data-table
|
||||
style="margin-top:10px;"
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
@ -19,7 +19,7 @@
|
||||
:pagination="pagination"
|
||||
@on-change="onChange"
|
||||
>
|
||||
</n-advanced-table>
|
||||
</n-data-table>
|
||||
```
|
||||
|
||||
```js
|
||||
@ -3,7 +3,7 @@
|
||||
```html
|
||||
<n-button @click="clearFilters">clear filters</n-button>
|
||||
|
||||
<n-advanced-table
|
||||
<n-data-table
|
||||
style="margin-top:10px;"
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
@ -11,7 +11,7 @@
|
||||
:pagination="pagination"
|
||||
@on-change="onChange"
|
||||
>
|
||||
</n-advanced-table>
|
||||
</n-data-table>
|
||||
```
|
||||
|
||||
```js
|
||||
@ -3,7 +3,7 @@
|
||||
Display large amounts of data in scrollable view.
|
||||
|
||||
```html
|
||||
<n-advanced-table
|
||||
<n-data-table
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
@ -11,7 +11,7 @@ Display large amounts of data in scrollable view.
|
||||
max-height="250px"
|
||||
@on-selected-change="onSelectedChange"
|
||||
>
|
||||
</n-advanced-table>
|
||||
</n-data-table>
|
||||
```
|
||||
|
||||
```js
|
||||
@ -7,7 +7,7 @@ Note that:
|
||||
> Specify the width of columns if header and cell do not align properly. If specified width is not working or have gutter between columns, please try to leave one column at least without width to fit fluid layout, or make sure no long word to break table layout.A fixed value which is greater than table width for `scroll-x` is recommended. The sum of unfixed columns should not greater than `scroll-x`.
|
||||
|
||||
```html
|
||||
<n-advanced-table
|
||||
<n-data-table
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
@ -15,7 +15,7 @@ Note that:
|
||||
max-height="250px"
|
||||
scroll-x="1300px"
|
||||
>
|
||||
</n-advanced-table>
|
||||
</n-data-table>
|
||||
```
|
||||
|
||||
```js
|
||||
@ -1,4 +1,4 @@
|
||||
# Table
|
||||
# DataTable
|
||||
|
||||
<!--single-column-->
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
# Custom render column header
|
||||
|
||||
```html
|
||||
<n-advanced-table
|
||||
<n-data-table
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
:pagination="pagination"
|
||||
>
|
||||
</n-advanced-table>
|
||||
</n-data-table>
|
||||
```
|
||||
|
||||
```js
|
||||
@ -4,14 +4,14 @@ Rows can be selectable by making first column as a selectable column.
|
||||
|
||||
```html
|
||||
selected items: {{selectedData.length}}
|
||||
<n-advanced-table
|
||||
<n-data-table
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
:pagination="pagination"
|
||||
@on-selected-change="onSelectedChange"
|
||||
>
|
||||
</n-advanced-table>
|
||||
</n-data-table>
|
||||
```
|
||||
|
||||
```js
|
||||
@ -48,7 +48,7 @@ import popconfirm from './documentation/components/popconfirm'
|
||||
import anchor from './documentation/components/anchor'
|
||||
import popselect from './documentation/components/popselect'
|
||||
import configProvider from './documentation/components/configProvider'
|
||||
import table from './documentation/components/table'
|
||||
import dataTable from './documentation/components/dataTable'
|
||||
import typography from './documentation/components/typography'
|
||||
import transfer from './documentation/components/transfer'
|
||||
import spin from './documentation/components/spin'
|
||||
@ -162,7 +162,7 @@ const routes = [
|
||||
{ path: '/n-button', component: button },
|
||||
{ path: '/n-switch', component: nswitch },
|
||||
// { path: '/n-table', component: tableDemo },
|
||||
{ path: '/n-table', component: table },
|
||||
{ path: '/n-data-table', component: dataTable },
|
||||
{ path: '/n-input', component: input },
|
||||
{ path: '/n-select', component: select },
|
||||
{ path: '/n-cascader', component: cascader },
|
||||
|
||||
4
index.js
4
index.js
@ -2,7 +2,7 @@ import Card from './packages/common/Card'
|
||||
import Icon from './packages/common/Icon'
|
||||
import GradientText from './packages/common/GradientText'
|
||||
import Table from './packages/common/Table'
|
||||
import AdvanceTable from './packages/common/AdvanceTable'
|
||||
import DataTable from './packages/common/DataTable'
|
||||
import CheckBox from './packages/common/Checkbox'
|
||||
import RoundButton from './packages/common/Button'
|
||||
import Switch from './packages/common/Switch'
|
||||
@ -111,7 +111,7 @@ function install (Vue) {
|
||||
Layout.install(Vue)
|
||||
GradientText.install(Vue)
|
||||
Table.install(Vue)
|
||||
AdvanceTable.install(Vue)
|
||||
DataTable.install(Vue)
|
||||
CheckBox.install(Vue)
|
||||
RoundButton.install(Vue)
|
||||
Switch.install(Vue)
|
||||
|
||||
@ -1,16 +0,0 @@
|
||||
/*
|
||||
* @Author: Volankey@gmail.com
|
||||
* @Company: Tusimple
|
||||
* @Date: 2019-10-25 10:13:50
|
||||
* @LastEditors: Jiwen.bai
|
||||
* @LastEditTime: 2019-10-25 11:24:13
|
||||
*/
|
||||
|
||||
import Scaffold from './src/main.vue'
|
||||
|
||||
Scaffold.install = function (Vue) {
|
||||
Scaffold.Vue = Vue
|
||||
Vue.component(Scaffold.name, Scaffold)
|
||||
}
|
||||
|
||||
export default Scaffold
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="n-advance-table__base-table-wrapper">
|
||||
<div class="n-data-table__base-table-wrapper">
|
||||
<table-header
|
||||
ref="header"
|
||||
:height="headerHeight"
|
||||
@ -9,7 +9,7 @@
|
||||
<!-- table body -->
|
||||
<div
|
||||
ref="scrollContainer"
|
||||
class="n-table n-advance-table__body"
|
||||
class="n-table n-data-table__body"
|
||||
:class="{
|
||||
[`n-${synthesizedTheme}-theme`]: synthesizedTheme
|
||||
}"
|
||||
@ -85,7 +85,7 @@
|
||||
</tbody>
|
||||
<!-- <div
|
||||
v-if="scrollBarHorizontalHeight"
|
||||
class="n-advance-table-scroll-bar-placeholder"
|
||||
class="n-data-table-scroll-bar-placeholder"
|
||||
:style="{ height: scrollBarHorizontalHeight + 'px' }"
|
||||
/> -->
|
||||
</table>
|
||||
@ -261,14 +261,14 @@ export default {
|
||||
computeTdClass (column, params) {
|
||||
let className = {}
|
||||
if (column.fixed) {
|
||||
className['n-advance-table__td--fixed'] = true
|
||||
className['n-data-table__td--fixed'] = true
|
||||
}
|
||||
if (column.ellipsis) {
|
||||
className['n-advance-table__td-text'] = true
|
||||
className['n-advance-table__td-text--ellipsis'] = true
|
||||
className['n-data-table__td-text'] = true
|
||||
className['n-data-table__td-text--ellipsis'] = true
|
||||
|
||||
// 'n-advance-table__td-text': true,
|
||||
// 'n-advance-table__td-text--ellipsis': column.ellipsis
|
||||
// 'n-data-table__td-text': true,
|
||||
// 'n-data-table__td-text--ellipsis': column.ellipsis
|
||||
}
|
||||
if (!column.className) {
|
||||
return className
|
||||
@ -10,7 +10,7 @@
|
||||
ref="header"
|
||||
style="padding:0;border-bottom-left-radius:0;border-bottom-right-radius:0;"
|
||||
:style="colHeaderGroupStl"
|
||||
class="n-advance-table__header"
|
||||
class="n-data-table__header"
|
||||
>
|
||||
<colgroup>
|
||||
<col
|
||||
@ -53,7 +53,7 @@
|
||||
v-if="column.sortable"
|
||||
:ref="'sorter_' + (column.key || i)"
|
||||
:value="sortIndexs[column.key || i]"
|
||||
class="n-advance-table__header-icon"
|
||||
class="n-data-table__header-icon"
|
||||
:column="column"
|
||||
:index="i"
|
||||
:current-key="currentKey"
|
||||
@ -69,7 +69,7 @@
|
||||
(column.filterItems || column.asyncFilterItems)
|
||||
"
|
||||
v-model="selectedFilter[column.key]"
|
||||
class="n-advance-table__header-icon"
|
||||
class="n-data-table__header-icon"
|
||||
:column="column"
|
||||
:items="column.filterItems || column.asyncFilterItems"
|
||||
@on-filter="onFilter"
|
||||
@ -176,9 +176,9 @@ export default {
|
||||
},
|
||||
computeThClass (column) {
|
||||
const classes = {
|
||||
'n-advance-table__sortable-column': column.sortable,
|
||||
'n-advance-table__td-text': column.ellipsis,
|
||||
'n-advance-table__td-text--ellipsis': column.ellipsis
|
||||
'n-data-table__sortable-column': column.sortable,
|
||||
'n-data-table__td-text': column.ellipsis,
|
||||
'n-data-table__td-text--ellipsis': column.ellipsis
|
||||
}
|
||||
return classes
|
||||
},
|
||||
17
packages/common/DataTable/index.js
Normal file
17
packages/common/DataTable/index.js
Normal file
@ -0,0 +1,17 @@
|
||||
/*
|
||||
* @Author: Volankey@gmail.com
|
||||
* @Company: Tusimple
|
||||
* @Date: 2019-10-25 10:13:50
|
||||
* @LastEditors: Jiwen.bai
|
||||
* @LastEditTime: 2019-10-25 11:24:13
|
||||
*/
|
||||
|
||||
import DataTable from './src/main.vue'
|
||||
|
||||
DataTable.install = function (Vue) {
|
||||
DataTable.Vue = Vue
|
||||
Vue.component(DataTable.name, DataTable)
|
||||
Vue.component('NAdvancedTable', DataTable)
|
||||
}
|
||||
|
||||
export default DataTable
|
||||
@ -8,21 +8,21 @@
|
||||
<template>
|
||||
<div
|
||||
ref="tableWrapper"
|
||||
class="n-advance-table__wrapper n-advance-table"
|
||||
class="n-data-table__wrapper n-data-table"
|
||||
:class="{
|
||||
[`n-${synthesizedTheme}-theme`]: synthesizedTheme,
|
||||
'n-advance-table--col-border': colBorder,
|
||||
'n-advance-table--no-data': showingData.length === 0
|
||||
'n-data-table--col-border': colBorder,
|
||||
'n-data-table--no-data': showingData.length === 0
|
||||
}"
|
||||
>
|
||||
<div
|
||||
ref="tbodyWrapper"
|
||||
class="n-advance-table__tbody"
|
||||
class="n-data-table__tbody"
|
||||
:style="tbodyWrapperStl"
|
||||
>
|
||||
<div
|
||||
v-if="fixedLeftColumn.length"
|
||||
class="n-advance-table__fixed--left n-advance-table__fixed"
|
||||
class="n-data-table__fixed--left n-data-table__fixed"
|
||||
:class="fixedLeftColumndClass"
|
||||
>
|
||||
<base-table
|
||||
@ -77,7 +77,7 @@
|
||||
</base-table>
|
||||
<div
|
||||
v-if="fixedRightColumn.length"
|
||||
class="n-advance-table__fixed--right n-advance-table__fixed"
|
||||
class="n-data-table__fixed--right n-data-table__fixed"
|
||||
:class="fixedRightColumndClass"
|
||||
>
|
||||
<base-table
|
||||
@ -106,7 +106,7 @@
|
||||
|
||||
<!-- loading -->
|
||||
<transition name="n-table-loading--transition">
|
||||
<div v-if="loading" class="n-advance-table__loading">
|
||||
<div v-if="loading" class="n-data-table__loading">
|
||||
<n-spin
|
||||
:spinning="true"
|
||||
style="width:100%;overflow:hidden;z-index:200;position:absolute;top:50%;"
|
||||
@ -116,7 +116,7 @@
|
||||
|
||||
<div
|
||||
v-if="showingData.length === 0 && !loading"
|
||||
class="n-advance-table__no-data-tip"
|
||||
class="n-data-table__no-data-tip"
|
||||
>
|
||||
No data
|
||||
</div>
|
||||
@ -125,7 +125,7 @@
|
||||
<div
|
||||
v-if="pagination !== false"
|
||||
:style="tbodyWrapperStl"
|
||||
class="n-advance-table__pagination"
|
||||
class="n-data-table__pagination"
|
||||
>
|
||||
<n-pagination
|
||||
v-model="currentPage"
|
||||
@ -160,7 +160,7 @@ const sortOrderReverseMap = {
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'NAdvancedTable',
|
||||
name: 'NDataTable',
|
||||
components: {
|
||||
// searchInput,
|
||||
BaseTable
|
||||
@ -265,12 +265,12 @@ export default {
|
||||
computed: {
|
||||
fixedLeftColumndClass () {
|
||||
return {
|
||||
'n-advance-table__fixed--active': this.horizontalScrollLeft > 0
|
||||
'n-data-table__fixed--active': this.horizontalScrollLeft > 0
|
||||
}
|
||||
},
|
||||
fixedRightColumndClass () {
|
||||
return {
|
||||
'n-advance-table__fixed--active': this.horizontalScrollLeft < this.tbodyWrapperWidth
|
||||
'n-data-table__fixed--active': this.horizontalScrollLeft < this.tbodyWrapperWidth
|
||||
}
|
||||
},
|
||||
tbodyWrapperStl () {
|
||||
@ -2,7 +2,7 @@
|
||||
@import "./themes/vars.scss";
|
||||
|
||||
@include themes-mixin {
|
||||
@include b(advance-table--col-border) {
|
||||
@include b(data-table--col-border) {
|
||||
table {
|
||||
thead {
|
||||
tr {
|
||||
@ -20,28 +20,28 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
@include b(advance-table) {
|
||||
.n-advance-table__fixed {
|
||||
@include b(data-table) {
|
||||
.n-data-table__fixed {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
overflow: hidden;
|
||||
top: 0px;
|
||||
// box-shadow: 10px 0 16px 3px rgba(0, 0, 0, 0.2);
|
||||
.n-table.n-advance-table__body {
|
||||
.n-table.n-data-table__body {
|
||||
width: auto;
|
||||
box-shadow: none;
|
||||
overflow-y: auto;
|
||||
border-radius: 0;
|
||||
}
|
||||
.n-advance-table__base-table-wrapper {
|
||||
.n-data-table__base-table-wrapper {
|
||||
overflow: unset;
|
||||
}
|
||||
table {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
.n-advance-table__td--fixed {
|
||||
.n-data-table__td--fixed {
|
||||
visibility: hidden;
|
||||
}
|
||||
@include e(fixed) {
|
||||
|
||||
@ -111,7 +111,8 @@
|
||||
line-height: 12px;
|
||||
}
|
||||
@include e(textarea, textarea-mirror) {
|
||||
display: block;
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
box-sizing: border-box;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@mixin setup-dark-advance-table {
|
||||
@mixin setup-dark-data-table {
|
||||
$--table-header-icon-color: $--primary-6 !global;
|
||||
$--table-scrollbar-color: rgba(255, 255, 255, 0.2) !global;
|
||||
$--table-loading-background: rgba(0, 0, 0, 0.15) !global;
|
||||
|
||||
@ -96,7 +96,7 @@
|
||||
@include setup-dark-base-cancel-mark;
|
||||
@include setup-dark-tag;
|
||||
@include setup-dark-table;
|
||||
@include setup-dark-advance-table;
|
||||
@include setup-dark-data-table;
|
||||
@include setup-dark-popover;
|
||||
@include setup-dark-tooltip;
|
||||
@include setup-dark-confirm;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@mixin setup-light-advance-table {
|
||||
@mixin setup-light-data-table {
|
||||
$--table-header-icon-color: $--primary-6 !global;
|
||||
$--table-scrollbar-color: #ababab !global;
|
||||
$--table-loading-background: rgba(255, 255, 255, 0.5) !global;
|
||||
|
||||
@ -93,7 +93,7 @@
|
||||
@include setup-light-base-cancel-mark;
|
||||
@include setup-light-tag;
|
||||
@include setup-light-table;
|
||||
@include setup-light-advance-table;
|
||||
@include setup-light-data-table;
|
||||
@include setup-light-popover;
|
||||
@include setup-light-tooltip;
|
||||
@include setup-light-confirm;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user