Why isn't the selection column fixed in Datatable?

UI Components for Vue
Post Reply
asdffdsa
Posts: 3
Joined: 09 Feb 2021, 04:15

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.

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>

Post Reply

Return to “PrimeVue”

  • Information