Why isn't the selection column fixed in Datatable?
Posted: 01 Apr 2021, 01:46
hello! I have sevaral question.
1. Why isn't the selection column fixed?
Initially, it is located in the first column. However, refreshing moves you to the location in the last column.
Also, the location changes when you add columns in the multi-selection area. Is there a problem with the settings?
2. The order of the columns is different. The product_number should be the first column, but it will be the last column.
1. Why isn't the selection column fixed?
Initially, it is located in the first column. However, refreshing moves you to the location in the last column.
Also, the location changes when you add columns in the multi-selection area. Is there a problem with the settings?
2. The order of the columns is different. The product_number should be the first column, but it will be the last column.
Code: Select all
<DataTable ref="dt" :value="datas"
:lazy="true" :paginator=true :rows="20" :totalRecords="totalRecords" :first="first" @page="onPage($event)"
paginatorTemplate="CurrentPageReport FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown"
:rowsPerPageOptions="[20,40,60,100]"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords}"
v-model:selection="selectedProducts" dataKey="id" @rowSelect="onRowSelect($event)"
stateStorage="session" stateKey="columnSession"
:reorderableColumns="true"
>
<template #header>
<Button label="edit" @click="multiEdit()"/>
<Button label="add"/>
<Button label="add"/>
<Button label="add"/>
<MultiSelect v-model="defalutSeletion" :modelValue="selectedColumns" :options="columns" optionLabel="header" :multiple="true" display="chip" @update:modelValue="onToggle" dataKey="id"
placeholder="Select Columns" style="width: 20em"/>
<InputText ref="searchBox" v-model="searchText" @keydown.enter="onFilter()" placeholder="Keyword Search" />
<Button label="clear" @click="clearFilters()"/>
</template>
<template #empty>
No Data.
</template>
<template #loading>
Loading data. Please wait.
</template>
<Column selectionMode="multiple" headerStyle="width: 3em" frozen="true" alignFrozen="left" reorderableColumn="false"></Column>
<Column v-for="(col, index) of selectedColumns" :ref="setItemRef" :field="col.field" :header="col.header" :key="col.field">
<template #body="slotProps">
<div v-if="col.field === 'product_number'" v-html="renderDatas(slotProps)" :ref="testRefs" @click="singleEdit(slotProps.data)"></div>
<div v-else v-html="renderDatas(slotProps)" :ref="testRefs" ></div>
</template>
</Column>
</DataTable>