I want to expand the rows of the table as in screenshot.How do I change the width of the th?
Is there any way how to add class to th
I want to
logTableField: [
{ key: "LogDate", label: "Tarih",thClass: 'bg-white text-dark' },
{ key: "LogUser", label: "Analist" },
{ key: "Description", label: " İşlem Açıklaması" },
{ key: "LogText", label: "Kullanıcı Yorumu" },
],
<b-tab title="Kayıt Logları" v-if="this.Logs != null">
<b-table
id="logTable"
striped
hover
:items="Logs"
:fields="logTableField"
per-page="10"
:current-page="currentPageLog"
>
<template slot="Description" slot-scope="row">
<div v-html="row.item.Description"></div>
</template>
</b-table>
<b-pagination
v-model="currentPageLog"
:total-rows="Logs.length"
per-page="10"
aria-controls="my-table"
></b-pagination>
</b-tab>
Check bootstrap-vue documentation for detailed styling on tables.
EDIT:
Please use lowercase variables.
Read the docs which are listed above
Why are your summed up widths not 100%?
If you in fact want to use classes, look up the answer from Stefanos_Apk which is perfect if there is more than one style attribute in my opinion
https://codesandbox.io/s/nervous-chandrasekhar-d5e2o?file=/src/components/Table.vue
logTableField: [
{
key: "logDate",
label: "Tarih",
thStyle: { width: "10%" },
},
{ key: "logUser", label: "Analist", thStyle: { width: "20%" } },
{
key: "description",
label: " İşlem Açıklaması",
thStyle: { width: "20%" },
},
{
key: "logText",
label: "Kullanıcı Yorumu",
thStyle: { width: "50%" },
},
],
You can set the thClass property inside of your field object. But tdClass just accepts a string or an array, not an object. So you can only reference to a css class.
logTableField: [
{ key: "LogDate", label: "Tarih", thClass: 'nameOfTheClass' },
{ key: "LogUser", label: "Analist", thClass: 'nameOfTheClas1' },
{ key: "Description", label: " İşlem Açıklaması", thClass: 'nameOfTheClass2' },
{ key: "LogText", label: "Kullanıcı Yorumu", thClass: 'nameOfTheClass3' },
]
and in your CSS:
.nameOfTheClass {
width: 10%
},
.nameOfTheClass1 {
width: 15%
}
.nameOfTheClass2 {
width: 15%
}
.nameOfTheClass3 {
width: 50%
}
Related
How to make this kinda search filter in ag grid vue?
Link for photo: https://ibb.co/cwVq7DD
Docs link: https://www.ag-grid.com/vue-data-grid/tool-panel-columns/#read-only-functions
I tried to use but this search filter not displaying.
<template>
<div>
<ag-grid-vue
style="width: 1270px; height: 175px"
class="ag-theme-alpine"
:columnDefs="columnDefs"
#grid-ready="onGridReady"
:defaultColDef="defaultColDef"
:autoGroupColumnDef="autoGroupColumnDef"
:pivotMode="true"
:sideBar="sideBar"
:rowGroupPanelShow="rowGroupPanelShow"
:pivotPanelShow="pivotPanelShow"
:rowData="rowData"
:alwaysShowHorizontalScroll="true"
:alwaysShowVerticalScroll="true">
</ag-grid-vue>
</div>
</template>
Also You can see vue scripts for ag-grid, that I tried to run for html template :
<script>
import "ag-grid-community/styles/ag-grid.css";
import "ag-grid-community/styles/ag-theme-alpine.css";
import { AgGridVue } from "ag-grid-vue3";
export default {
name: "WbCardDetail",
components: {
AgGridVue,
},
setup() {
return {
columnDefs: [
{ headerName: "№", field: "position", filter: 'agTextColumnFilter', filterParams: {
textMatcher: ({filter, value, filterText}) => {
// custom matching logic that returns a boolean
}
} },
{ headerName: "Фото", field: "thumb", filter: 'agTextColumnFilter' },
{ headerName: "Цена ставки", field: "cpm", filter: 'agTextColumnFilter' },
{ headerName: "SKU", field: "id", filter: 'agTextColumnFilter' },
],
rowData: [
{ position: "1", thumb: "Photo", cpm: "120"},
],
defaultColDef: {
flex: 1,
minWidth: 100,
filter: true,
sortable: true,
enablePivot: true,
enableValue: true,
enableRowGroup: true,
resizable: true,
}
}
},
created() {
this.autoGroupColumnDef = {
minWidth: 200,
};
this.sideBar = {
toolPanels: [
{
id: 'columns',
labelDefault: 'Столбцы',
labelKey: 'columns',
iconKey: 'columns',
toolPanel: 'agColumnsToolPanel',
toolPanelParams: {
suppressRowGroups: true,
suppressValues: true,
suppressPivots: true,
suppressPivotMode: true,
suppressColumnFilter: true,
suppressColumnSelectAll: true,
suppressColumnExpandAll: true,
},
},
],
defaultToolPanel: 'columns',
};
},
}
</script>
Thanks!
I found the answer, search works only on non-free version of ag-grid!
I have an array of objects in a state, the object has an id, a title and a url, I go through this array and show a div with an input checkbox and an image that corresponds to the checkbox, when I click on a checkbox using v- model I save the id in an array, if it is checked I save it, if it is not, I remove it from the array. I want that when it is checked or the checkbox id exists in the array, modify the image, if it is not, return to its original form, this with each checkbox and its corresponding image, how can I do it?
I loop through the store array and display a div with a checkbox and the image
<div v-for="item in store.items" :key="store.id">
<input
type="checkbox"
:value="item.title"
v-model="store.checkeds"
:id="item.id"
>
<img
:src="item.url"
:alt="item.title"
width="30"
height="30"
>
</div>
store
state: () => ({
checkeds: [],
items: [
{
"id": "1",
"url": "../assets/imagen.svg",
"title": "imagen"
},
{
"id": "2",
"url": "../assets/imagen2.svg",
"title": "imagen2"
},
{
"id": "3",
"url": "../assets/imagen3.svg",
"title": "imagen3"
},
{
"id": "4",
"url": "../assets/imagen4.svg",
"title": "imagen4"
},
{
"id": "5",
"url": "../assets/imagen5.svg",
"title": "imagen5"
},
{
"id": "6",
"url": "../assets/imagen6.svg",
"title": "imagen6"
},
]
})
I write a simple sample about how to manage array-style models.
<template>
<div>
<div
v-for="(item, i) in filtersStore.items" :key="item.id"
class="col-6 col-sm-4 col-lg-3 mb-3 d-flex align-items-start mb-2"
>
<input
type="checkbox"
:id="item.id"
class="mt-2"
v-model="filtersStore.checked[i]"
#change="checkedChanged"
>
<img
:src="item.urlEdited || item.url"
:alt="item.title"
:style="item.style"
>
</div>
</div>
</template>
<script>
export default {
name: 'BaseCheckBoxTest',
data() {
return {
filtersStore: {
items: [
{
id: 1,
title: 'Check 1',
url: 'https://picsum.photos/id/0/5616/3744',
style: {
width: '100px',
height: '100px',
},
},
{
id: 2,
title: 'Check 2',
url: 'https://picsum.photos/seed/picsum/200/300',
style: {
width: '100px',
height: '100px',
},
},
{
id: 3,
title: 'Check 3',
url: 'https://picsum.photos/id/1/5616/3744',
style: {
width: '100px',
height: '100px',
},
},
{
id: 4,
title: 'Check 4',
url: 'https://picsum.photos/id/1023/3955/2094',
style: {
width: '100px',
height: '100px',
},
},
],
checked: [],
},
};
},
methods: {
checkedChanged() {
this.filtersStore.checked.forEach((isChecked, index) => {
if (isChecked) {
// Apply your action here
this.filtersStore.items[index].urlEdited = this.filtersStore.items[index].url + '?grayscale';
this.filtersStore.items[index].style = {
width: '150px',
height: '150px',
};
} else {
// Remove your action here
this.filtersStore.items[index].urlEdited = undefined;
this.filtersStore.items[index].style = {
width: '100px',
height: '100px',
};
}
});
},
},
};
</script>
I store the status of checkboxes in an array (v-model="filtersStore.checked[i]"). This array provides us with the selected items. Just loop over the status array and apply your filter or action.
If you provide more information about the state and actions, I can improve it in a more practical way.
UPDATE: if a checkbox gets checked, the image style will change.
I have defined a custom input with type=file , but I can't access the selected data after pressing the Submit key.
(I am new to such an exercise so please pardon my ignorance.. Also could not find examples/samples to work with..)
add a custom input and upload/cancel keys in the panel:
setup: function (editor) {
editor.ui.registry.addButton("customInsertButton", {
icon: "embed",
tooltip: "Insert Media",
onAction: function () {
editor.windowManager.open({
title: "Insert Media",
body: {
type: "panel",
items: [
{
type: "htmlpanel",
name: "file",
html: '<input type="file" class="input"
name="file" id="file_attach"
style="font-size: 16px; padding: 30px 0px; width:100%;" />',
},
{
type: "alertbanner",
level: "error",
text: "text error",
icon: "info",
},
],
},
onSubmit: function (api) {
const data = api.getData(); //it is empty :(
api.close();
},
buttons: [
{
text: "Close",
type: "cancel",
onclick: "close",
},
{
text: "Upload",
type: "submit",
primary: true,
enabled: true,
},
],
});
},
});
},
This is the dependency I'm using for the editor and they have an example where they modify the default toolbar to remove certain options, I would like to remove some options but the example is very lacking and doesn't show how to add all the options I would like and I don't know how to add them.
This is the example from the dependency page
<template>
<div id="app">
<vue-editor v-model="content" :editorToolbar="customToolbar"></vue-editor>
</div>
</template>
<script>
import { VueEditor } from "vue2-editor";
export default {
components: {
VueEditor
},
data() {
return {
content: "<h1>Html For Editor</h1>",
customToolbar: [["bold", "italic", "underline"], [{ list: "ordered" }, { list: "bullet" }], ["image", "code-block"]]
};
}
};
</script>
I would like in my toolbar something like this
customToolbar: [["bold", "italic", "underline"], [{ list: "ordered" }, { list: "bullet" }],
[{ align: "left" }, { align: "center" }, { align: "right"}, { align: "justify"}],
[{ color: "color-picker" }]],
However this is the result, the align: left is not showing up and the color: color-picker doesn't work. If I click on the color picker nothing happens and no menu shows up
I'm not sure how I could get this to work
This is the CodeSandBox my current setup that doesn't work
Using the following configuration should fix the issues:
customToolbar: [
["bold", "italic", "underline"],
[{ list: "ordered" }, { list: "bullet" }],
[
{ align: "" },
{ align: "center" },
{ align: "right" },
{ align: "justify" }
],
[{ color: [] }]
]
Here is the code for the standard configuration of the toolbar:
https://github.com/davidroyer/vue2-editor/blob/master/src/helpers/default-toolbar.js
const columns = [
{ title: 'Name', dataIndex: 'name', width: 300
onHeaderCell: column => {
return {
onClick: e => {
this.customize(e);
},
};
},},
{ title: 'Employee ID', dataIndex: 'displayId', width: 150 },
{ title: 'Normal', dataIndex: 'normal.name', width: 100 },
{ title: 'Overtime', dataIndex: 'overtime.name', width: 100 },
{ title: 'Holiday', dataIndex: 'holiday.name', width: 100 },
{ title: 'Rest Day', dataIndex: 'restDay.name', width: 100 },
];
I have an ant design vue table and want to add event on click to change the title name. But I can't add on click event and customize the column title.
Is there any way to make this happen when click the column title will triggered a function?
I assume you are using this Ant Design Vue and this Table component.
You can use custom title by specify column.slots.title:
const columns = [
{
dataIndex: 'name',
key: 'name',
slots: {
title: 'customTitle'
}
}
]
And define your customTitle slot:
<span slot='customTitle'>
<div #click='editTitle'>{{ title }}</div>
</span>
Example
You can add a parameter for each item for example "isClickable" and put a click listener on each item of the v-for which will enter in a method that check if the item is clickable or not.
<template>
<div>
<div
v-for="column in columns"
#click="clickOnColumn(column)"
/>
</div>
</template>
<script>
export default {
data: () => ({
columns: [
{
title: 'Name',
dataIndex: 'name',
width: 300,
isClickable: true,
},
{ title: 'Employee ID', dataIndex: 'displayId', width: 150 },
{ title: 'Normal', dataIndex: 'normal.name', width: 100 },
{ title: 'Overtime', dataIndex: 'overtime.name', width: 100 },
{ title: 'Holiday', dataIndex: 'holiday.name', width: 100 },
{ title: 'Rest Day', dataIndex: 'restDay.name', width: 100 },
],
}),
methods: {
clickOnColumn(column) {
if (column.isClickable) {
// Execute code
} else {
return null
}
},
},
}
</script>
<style lang="scss" scoped>
</style>