panel/baseui
1
0
Fork 0
Code Issues 8 Pull Requests Releases Wiki Activity

use real table layout, let table rows overflow into ellipsis

Browse Source
This commit is contained in:
Anton Schubert 2017-08-29 23:41:19 +02:00
parent 82569aba22
commit 8045a3d3cf
2 changed files with 47 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/components/my-table.vue
View File

@ -1,8 +1,10 @@
<template> <template>
<div class="cms_table"> <div class="cms_table">
<div class="table_header"> <div class="table_header">
<div class="table_row"> <!-- <div class="table_row"> -->
<div v-for="(col, i) in columns" :class="['table_cell', {['sortable']: col.orderBy}]" :key="i"> <div v-for="(col, i) in columns"
:class="['table_cell', {['sortable']: col.orderBy}]"
:key="i">
<div @click="orderBy(col.orderBy)" v-if="col.orderBy"> <div @click="orderBy(col.orderBy)" v-if="col.orderBy">
{{ col.heading }} {{ col.heading }}
<i class="icon icon-angle-up" aria-hidden="true" v-if="currentOrderBy !== col.orderBy"></i> <i class="icon icon-angle-up" aria-hidden="true" v-if="currentOrderBy !== col.orderBy"></i>
@ -12,13 +14,13 @@
<div v-else>{{ col.heading }}</div> <div v-else>{{ col.heading }}</div>
</div> </div>
<div class="table_cell cell_settings" v-if="actions.length"></div> <div class="table_cell cell_settings" v-if="actions.length"></div>
</div> <!-- </div> -->
</div> </div>
<div class="table_content" is="transition-group" name="list"> <div class="table_content" is="transition-group" name="list">
<div class="table_row" v-for="(row, ri) in rows" :key="ri"> <div class="table_row" v-for="(row, ri) in rows" :key="ri">
<div class="table_cell" v-for="(col, ci) in columns" :key="ci + 'c'"> <div class="table_cell" v-for="(col, ci) in columns" :key="ci + 'c'">
<div v-if="col.prop">{{ getProp(row, col.prop) }}</div> <span v-if="col.prop">{{ getProp(row, col.prop) }}</span>
<div v-else-if="col.render">{{ col.render(row) }}</div> <span v-else-if="col.render">{{ col.render(row) }}</span>
</div> </div>
<div class="table_cell cell_settings" v-if="actions.length" ref="row_actions"> <div class="table_cell cell_settings" v-if="actions.length" ref="row_actions">
@ -129,19 +131,26 @@
# Content Tables # Content Tables
--------------------------------------------------------------*/ --------------------------------------------------------------*/
.cms_table{ .cms_table{
&>.table_header, &>.table_content{margin: 0px -25px;}
&>.table_header{
.table_row {background:none; font-size:13px; padding:10px 15px;}
.icon {font-size:14px;}
}
.table_row{
position: relative;
display: table; display: table;
width: 100%; width: 100%;
overflow: hidden;
border-collapse: collapse;
table-layout: fixed; table-layout: fixed;
background: white;
padding: 10px 15px;
.table_header, .table_content{margin: 0px -25px;}
.table_header{
display: table-header-group;
}
.table_content{
display: table-row-group;
}
.table_row{
display: table-row;
position: relative;
background: white;
&:nth-child(even) { &:nth-child(even) {
background: #f5f3f4; background: #f5f3f4;
} }
@ -150,7 +159,12 @@
.table_cell { .table_cell {
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
padding:0px 10px; font-size: 13px;
padding: 10px 15px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
&.sortable{ &.sortable{
&:hover{ &:hover{
@ -193,6 +207,7 @@
position: relative; position: relative;
width: 40px; width: 40px;
text-align: right; text-align: right;
overflow: visible;
.actions_btn{ .actions_btn{
z-index: 20; z-index: 20;

2
src/views/lists/userlist.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="Userlist"> <div class="Userlist">
<h1>Userlist</h1> <h1>Userlist</h1>
<scroll-table :actions="actions" :columns="columns" :new-rows="newRows" :has-more="hasMore" :loading="loading" :handler="more" orderBy="username" :orderDesc="false" limit="50"></scroll-table> <scroll-table :actions="actions" :columns="columns" :new-rows="newRows" :has-more="hasMore" :loading="loading" :handler="more" orderBy="username" :orderDesc="false" :limit="50"></scroll-table>
</div> </div>
</template> </template>