-
Notifications
You must be signed in to change notification settings - Fork 138
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(comp: table): update style with sticky and bodered
- Loading branch information
Showing
14 changed files
with
176 additions
and
28 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
--- | ||
title: | ||
zh: 带边框,页头和页脚 | ||
en: With border, header and footer | ||
order: 62 | ||
--- | ||
|
||
## zh | ||
|
||
添加表格边框线,页头和页脚。 | ||
|
||
## en | ||
|
||
Add border, title and footer for table. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,46 @@ | ||
<template> | ||
<IxTable :columns="columns" :dataSource="data" :borderless="false"> | ||
<template #header> | ||
<IxHeader title="Table Header" suffix="setting"></IxHeader> | ||
</template> | ||
<template #footer> | ||
<spam>This is footer</spam> | ||
</template> | ||
</IxTable> | ||
</template> | ||
|
||
<script lang="ts" setup> | ||
import { TableColumn } from '@idux/components/table' | ||
interface Data { | ||
key: number | ||
name: string | ||
age: number | ||
address: string | ||
} | ||
const columns: TableColumn<Data>[] = [ | ||
{ | ||
title: 'Name', | ||
dataKey: 'name', | ||
}, | ||
{ | ||
title: 'Age', | ||
dataKey: 'age', | ||
}, | ||
{ | ||
title: 'Address', | ||
dataKey: 'address', | ||
}, | ||
] | ||
const data: Data[] = [] | ||
for (let index = 0; index < 4; index++) { | ||
data.push({ | ||
key: index, | ||
name: `Edrward ${index}`, | ||
age: 18 + index, | ||
address: `London Park no. ${index}`, | ||
}) | ||
} | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -2,7 +2,7 @@ | |
title: | ||
zh: 行/列合并 | ||
en: Merge row and column | ||
order: 10 | ||
order: 80 | ||
--- | ||
|
||
## zh | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -2,7 +2,7 @@ | |
title: | ||
zh: 斑马纹表格 | ||
en: Striped Table | ||
order: 1 | ||
order: 63 | ||
--- | ||
|
||
## zh | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
--- | ||
title: | ||
zh: 跟随页面固定的表头 | ||
en: Fixed header with the page | ||
order: 55 | ||
--- | ||
|
||
## zh | ||
|
||
对于长表格,需要滚动才能查看表头和滚动条,那么现在可以设置跟随页面固定表头和滚动条。 | ||
|
||
> 使用 `position: sticky` 实现,如果没有生效,请检查父元素是否有元素设置了 `overflow`,具体原因请查看 [MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/position) | ||
## en | ||
|
||
For long table,need to scroll to view the header and scroll bar,then you can now set the fixed header and scroll bar to follow the page. | ||
|
||
> Use `position: sticky` to implement, if it does not take effect, please check whether the parent element has set `overflow`, see [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/position) for specific reasons. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,46 @@ | ||
<template> | ||
<IxTable :columns="columns" :dataSource="data" :pagination="false" :scroll="scroll" sticky> | ||
<template #name="{ value }"> | ||
<a>{{ value }}</a> | ||
</template> | ||
</IxTable> | ||
</template> | ||
|
||
<script lang="ts" setup> | ||
import { TableColumn } from '@idux/components/table' | ||
interface Data { | ||
key: number | ||
name: string | ||
age: number | ||
address: string | ||
} | ||
const columns: TableColumn<Data>[] = [ | ||
{ | ||
title: 'Name', | ||
dataKey: 'name', | ||
customCell: 'name', | ||
}, | ||
{ | ||
title: 'Age', | ||
dataKey: 'age', | ||
}, | ||
{ | ||
title: 'Address', | ||
dataKey: 'address', | ||
}, | ||
] | ||
const data: Data[] = [] | ||
for (let index = 0; index < 30; index++) { | ||
data.push({ | ||
key: index, | ||
name: `Edrward ${index}`, | ||
age: 18 + index, | ||
address: `London Park no. ${index}`, | ||
}) | ||
} | ||
const scroll = { height: 300 } | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -2,7 +2,7 @@ | |
title: | ||
zh: 树表格 | ||
en: Tree table | ||
order: 80 | ||
order: 21 | ||
--- | ||
|
||
## zh | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,7 +1,6 @@ | ||
.root-wrapper { | ||
width: 100%; | ||
height: 100%; | ||
overflow: hidden; | ||
} | ||
|
||
.main-wrapper { | ||
|