Skip to content

Commit

Permalink
Merge pull request #14 from muhimasri/column-width
Browse files Browse the repository at this point in the history 
Column width
  • Loading branch information
@muhimasri
muhimasri authored Jan 3, 2022
2 parents cc2450a + 02bf7de commit efc9c77
Show file tree
Hide file tree
Showing 11 changed files with 660 additions and 126 deletions.
367 changes: 319 additions & 48 deletions README.md
View file

Large diffs are not rendered by default.

113 changes: 113 additions & 0 deletions dev/examples/add-remove-example.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,113 @@
<template>
<div class="table-container">
<b-button variant="success" @click="handleAdd()">Add</b-button>
<b-editable-table bordered class="editable-table" v-model="items" :fields="fields">
<template #cell(isActive)="data">
<span v-if="data.value">Yes</span>
<span v-else>No</span>
</template>
<template #cell(delete)="data">
<BIconX class="remove-icon" @click="handleDelete(data)"></BIconX>
</template>
</b-editable-table>
<pre>
{{items}}
</pre>
</div>
</template>

<script>
import BEditableTable from '@/b-editable-table.vue';
import {BIconX} from 'bootstrap-vue';
export default {
components: {
BEditableTable,
BIconX
},
data() {
return {
fields: [
{ key: "name", label: "Name", type: "text", editable: true, placeholder: "Enter Name...", class: "name-col"},
{ key: "department", label: "Department", type: "select", editable: true, class: "department-col" , options: [
{ value: 1, text: 'HR' },
{ value: 2, text: 'Engineer' },
{ value: 3, text: 'VP' },
{ value: 4, text: 'CEO'}
]},
{ key: "age", label: "Age", type:"range", min:"0", max:"100", editable: true, placeholder: "Enter Age...", class: "age-col" },
{ key: "dateOfBirth", label: "Date Of Birth", type: "date", editable: true, class: "date-col", locale: "en",
"date-format-options": {
year: "numeric",
month: "numeric",
day: "numeric",
}, },
{ key: "isActive", label: "Is Active", type: "checkbox", editable: true, class: "is-active-col" },
{ key: "delete", label: "" }
],
items: [
{ age: 40, name: 'Dickerson', department: 1, dateOfBirth: '1984-05-20', isActive: true },
{ age: 21, name: 'Larsen', department: 2, dateOfBirth: '1972-07-25', isActive: false },
{ age: 89, name: 'Geneva', department: 3, dateOfBirth: '1981-02-02', isActive: false },
{ age: 38, name: 'Jami', department: 4, dateOfBirth: '1964-10-19', isActive: true },
]
};
},
methods: {
handleAdd() {
this.items.unshift({});
},
handleDelete(data) {
this.items.splice(data.index, 1);
}
}
};
</script>

<style>
.table-container {
margin: 10px;
}
table.editable-table {
margin-top: 10px;
}
table.editable-table td {
vertical-align: middle;
}
.editable-table .data-cell {
padding: 8px;
vertical-align: middle;
}
.editable-table .custom-checkbox {
width: 50px;
}
.remove-icon {
color: red;
cursor: pointer;
font-size: 20px;
}
.name-col {
width: 120px;
}
.department-col {
width: 150px;
}
.age-col {
width: 100px;
}
.date-col {
width: 200px;
}
.is-active-col {
width: 100px
}
</style>
64 changes: 44 additions & 20 deletions dev/examples/api-example.vue
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,16 @@
<template>
<div>
<button @click="handleAdd()">Add</button>
<b-editable-table bordered :small="true" fixed class="editable-table" v-model="users" :fields="fields" @input-change="handleInput">
<b-editable-table :busy="loading" bordered class="editable-table" v-model="users" :fields="fields">
<template #cell-isActive="data">
<span v-if="data.value">Yes</span>
<span v-else>No</span>
</template>
<template #table-busy>
<div class="text-center text-danger my-2">
<b-spinner class="align-middle"></b-spinner>
<strong>Loading...</strong>
</div>
</template>
</b-editable-table>
<pre>
{{users}}
Expand All @@ -15,9 +20,11 @@

<script>
import BEditableTable from '@/b-editable-table.vue';
import {BSpinner} from 'bootstrap-vue';
export default {
components: {
BEditableTable
BEditableTable,
BSpinner
},
data() {
return {
Expand All @@ -26,38 +33,55 @@ export default {
{ key: "email", label: "Email", type: "email", editable: true },
{ key: "phone", label: "Phone", type: "text", editable: true }
],
users: []
users: [],
loading: false
};
},
methods: {
handleInput(value, data) {
// const newRow = {...this.users[data.index], [data.field.key]: value};
// this.$set(this.users, data.index, newRow);
// this.users[data.index][data.field.key] = value;
},
handleAdd() {
const newRow = {name: 'John Snow', email: '[email protected]', phone: '123456789'};
this.users.unshift(newRow);
}
},
async mounted() {
this.loading = true;
const response = await fetch('https://jsonplaceholder.typicode.com/users');
const users = await response.json();
this.users = users;
this.loading = false;
}
};
</script>

<style>
.editable-table .data-cell {
padding: 0.4rem 0.4rem;
table.editable-table {
margin: auto;
}
table.editable-table td {
vertical-align: middle;
}
.editable-table th, .editable-table td {
vertical-align: middle !important;
.editable-table .data-cell {
padding: 8px;
vertical-align: middle;
}
.editable-table .custom-checkbox {
margin-left: 7px;
width: 50px;
}
.name-col {
width: 120px;
}
.department-col {
width: 150px;
}
.age-col {
width: 100px;
}
.date-col {
width: 200px;
}
.is-active-col {
width: 100px
}
</style>
63 changes: 41 additions & 22 deletions dev/examples/basic-example.vue
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
<template>
<div>
<button @click="addItem()">Add</button>
<b-editable-table bordered :small="true" fixed class="editable-table" v-model="items" :fields="fields" @input-change="handleInput">
<template #cell-isActive="data">
<b-editable-table bordered class="editable-table" v-model="items" :fields="fields" @input-change="handleInput">
<template #cell(isActive)="data">
<span v-if="data.value">Yes</span>
<span v-else>No</span>
</template>
Expand All @@ -15,59 +14,79 @@

<script>
import BEditableTable from '@/b-editable-table.vue';
import {BButton} from 'bootstrap-vue';
export default {
components: {
BEditableTable
},
data() {
return {
fields: [
{ key: "name", label: "Name", type: "text", editable: true, placeholder: "Enter Name..."},
{ key: "department", label: "Department", type: "select", options: [
{ key: "name", label: "Name", type: "text", editable: true, placeholder: "Enter Name...", class: "name-col"},
{ key: "department", label: "Department", type: "select", editable: true, class: "department-col" , options: [
{ value: 1, text: 'HR' },
{ value: 2, text: 'Engineer' },
{ value: 3, text: 'VP' },
{ value: 4, text: 'CEO'}
], editable: true },
{ key: "age", label: "Age", type:"range", min:"0", max:"100", editable: true, placeholder: "Enter Age..." },
{ key: "dateOfBirth", label: "Date Of Birth", type: "date", editable: true, locale: "en",
]},
{ key: "age", label: "Age", type:"range", min:"0", max:"100", editable: true, placeholder: "Enter Age...", class: "age-col" },
{ key: "dateOfBirth", label: "Date Of Birth", type: "date", editable: true, class: "date-col", locale: "en",
"date-format-options": {
year: "numeric",
month: "numeric",
day: "numeric",
}, },
{ key: "isActive", label: "Is Active", type: "checkbox", editable: true },
{ key: "isActive", label: "Is Active", type: "checkbox", editable: true, class: "is-active-col" }
],
items: [
{ age: 40, name: 'Dickerson', department: 1, dateOfBirth: '1984-05-20', isActive: true },
{ age: 21, name: 'Larsen', department: 2, dateOfBirth: '1972-07-25', isActive: false },
{ age: 89, name: 'Geneva', department: 3, dateOfBirth: '1981-02-02', isActive: false },
{ age: 38, name: 'Jami', department: 4, dateOfBirth: '1964-10-19', isActive: true }
{ age: 38, name: 'Jami', department: 4, dateOfBirth: '1964-10-19', isActive: true },
]
};
},
methods: {
handleInput(value, data) {
console.log(data);
// this.items[data.index][data.field.key] = value;
},
addItem() {
this.items.push({ age: 22, name: 'Elham', department: 2, dateOfBirth: '1964-10-19', isActive: true });
}
handleInput(value, data) {}
}
};
</script>

<style>
.editable-table .data-cell {
padding: 0.4rem 0.4rem;
table.editable-table {
margin: auto;
}
table.editable-table td {
vertical-align: middle;
}
.editable-table th, .editable-table td {
vertical-align: middle !important;
.editable-table .data-cell {
padding: 8px;
vertical-align: middle;
}
.editable-table .custom-checkbox {
margin-left: 7px;
width: 50px;
}
.name-col {
width: 120px;
}
.department-col {
width: 150px;
}
.age-col {
width: 100px;
}
.date-col {
width: 200px;
}
.is-active-col {
width: 100px
}
</style>
Loading

0 comments on commit efc9c77

Please sign in to comment.