Selection and operations

The row-selection object turns on row selection: selectedRowKeys holds the selected keys, onChange reports the changes. Actions on the selected set fit nicely in the toolbar slot.

Sandbox Storybook

<script setup lang="ts">
import type { NTable } from '@central-design-system/components';
import { CdsButton, CdsTable } from '@central-design-system/components';
import { reactive, toRefs } from 'vue';

const state = reactive<{ selectedRowKeys: NTable.TKey[]; loading: boolean }>({
  selectedRowKeys: [],
  loading: false
});

const start = () => {
  state.loading = true;

  setTimeout(() => {
    state.loading = false;
    state.selectedRowKeys = [];
  }, 1000);
};

const cancel = () => {
  state.selectedRowKeys = [];
};

const onSelectChange = (selectedRowKeys: NTable.TKey[]) => {
  state.selectedRowKeys = selectedRowKeys;
};

const columns: NTable.NColumn.TColumns = [
  { title: 'Заголовок 1', dataIndex: 'name' },
  { title: 'Заголовок 2', dataIndex: 'age' },
  { title: 'Заголовок 3', dataIndex: 'address' },
  { title: 'Заголовок 4', dataIndex: 'phone' }
];
const data = [...Array(8)].map((_, i) => ({
  key: i,
  name: `Текст ячейки ${i}`,
  age: `Текст ячейки ${i}`,
  address: `Текст ячейки ${i}`,
  phone: `Текст ячейки ${i}`
}));

const { selectedRowKeys, loading } = toRefs(state);
</script>

<template>
  <CdsTable
    :columns="columns"
    :data="data"
    :row-selection="{ selectedRowKeys, onChange: onSelectChange }"
    :pagination="false"
  >
    <template #toolbar>
      <div class="flex items-center justify-between">
        <p>
          Выбрано: <strong>{{ selectedRowKeys.length }}</strong> строк
        </p>
        <div class="flex gap-2">
          <CdsButton variant="soft" color="brand" @click="cancel">Отменить</CdsButton>
          <CdsButton :loading="loading" @click="start">Загрузить</CdsButton>
        </div>
      </div>
    </template>
  </CdsTable>
</template>

Custom selection menu items

The selections property fills the menu in the selection column header: the ready-made SELECTION_ALL, SELECTION_INVERT and SELECTION_NONE constants plus your own items with arbitrary logic.

Sandbox Storybook

<script setup lang="ts">
import type { NTable } from '@central-design-system/components';
import { CdsTable, SELECTION_ALL, SELECTION_INVERT, SELECTION_NONE } from '@central-design-system/components';
import { computed, ref, unref } from 'vue';

const selectedRowKeys = ref<NTable.TKey[]>([]);

const onSelectChange = (selectedRows: NTable.TKey[]) => {
  selectedRowKeys.value = selectedRows;
};

const rowSelection = computed(() => ({
  selectedRowKeys: unref(selectedRowKeys),
  onChange: onSelectChange,
  hideDefaultSelections: true,
  selections: [
    SELECTION_ALL,
    SELECTION_INVERT,
    SELECTION_NONE,
    {
      key: 'odd',
      text: 'Выбрать нечетные',
      onSelect: (selectedRows: NTable.TKey[]) => {
        selectedRowKeys.value = selectedRows.filter((_key, index) => index % 2 === 0);
      }
    },
    {
      key: 'even',
      text: 'Выбрать четные',
      onSelect: (selectedRows: NTable.TKey[]) => {
        selectedRowKeys.value = selectedRows.filter((_key, index) => index % 2 !== 0);
      }
    }
  ]
}));

const columns: NTable.NColumn.TColumns = [
  { title: 'Заголовок 1', dataIndex: 'name' },
  { title: 'Заголовок 2', dataIndex: 'age' },
  { title: 'Заголовок 3', dataIndex: 'address' },
  { title: 'Заголовок 4', dataIndex: 'phone' }
];
const data = [...Array(6)].map((_, i) => ({
  key: i,
  name: `Текст ячейки ${i}`,
  age: `Текст ячейки ${i}`,
  address: `Текст ячейки ${i}`,
  phone: `Текст ячейки ${i}`
}));
</script>

<template>
  <CdsTable :columns="columns" :data="data" :row-selection="rowSelection" :pagination="false" />
</template>