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

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

@ -1,8 +1,10 @@
<template>
<div class="cms_table">
<div class="table_header">
<div class="table_row">
<div v-for="(col, i) in columns" :class="['table_cell', {['sortable']: col.orderBy}]" :key="i">
<!-- <div class="table_row"> -->
<div v-for="(col, i) in columns"
:class="['table_cell', {['sortable']: col.orderBy}]"
:key="i">
<div @click="orderBy(col.orderBy)" v-if="col.orderBy">
{{ col.heading }}
<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>
<div class="table_cell cell_settings" v-if="actions.length"></div>
</div>
<!-- </div> -->
</div>
<div class="table_content" is="transition-group" name="list">
<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 v-if="col.prop">{{ getProp(row, col.prop) }}</div>
<div v-else-if="col.render">{{ col.render(row) }}</div>
<span v-if="col.prop">{{ getProp(row, col.prop) }}</span>
<span v-else-if="col.render">{{ col.render(row) }}</span>
</div>
<div class="table_cell cell_settings" v-if="actions.length" ref="row_actions">
@ -129,35 +131,47 @@
# Content Tables
--------------------------------------------------------------*/
.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;
width: 100%;
table-layout: fixed;
background: white;
padding: 10px 15px;
display: table;
width: 100%;
overflow: hidden;
border-collapse: collapse;
table-layout: fixed;
&:nth-child(even) {
background:#f5f3f4;
}
.table_header, .table_content{margin: 0px -25px;}
.table_header{
display: table-header-group;
}
.table_cell {
display: table-cell;
vertical-align: middle;
padding:0px 10px;
.table_content{
display: table-row-group;
}
&.sortable{
&:hover{
cursor: pointer;
}
}
}
.table_row{
display: table-row;
position: relative;
background: white;
&:nth-child(even) {
background: #f5f3f4;
}
}
.table_cell {
display: table-cell;
vertical-align: middle;
font-size: 13px;
padding: 10px 15px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
&.sortable{
&:hover{
cursor: pointer;
}
}
}
/*.cell_checkbox {width:40px;}
.cell_image {width:120px; line-height:0;} .cell_image img {width:100%;}
@ -190,9 +204,10 @@
/* === Cell settings === */
.cell_settings {
.clearfix();
position:relative;
position: relative;
width: 40px;
text-align: right;
overflow: visible;
.actions_btn{
z-index: 20;

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

@ -1,7 +1,7 @@
<template>
<div class="Userlist">
<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>
</template>