DataTableStyleSelector

Visão geral

O LxDataTableStyleSelector fornece um controle simples para alternar a densidade visual do LxDataTable entre os modos compacto e confortável.

O componente trabalha com v-model e emite o identificador do estilo selecionado. Isso permite aplicar a mudança diretamente na visualizationConfig da tabela ou em qualquer outro estado externo que represente a visualização atual.

<script setup>
import { computed, ref } from 'vue';
import { LxDataTable, LxDataTableColumn, LxDataTableStyleSelector, TableStyle } from '@lde/lxcomponents';

const styleId = ref(TableStyle.COMPACT.id);

const visualizationConfig = computed(() => ({
  size: styleId.value
}));
</script>

<template>
  <LxDataTableStyleSelector v-model="styleId" />

  <LxDataTable :value="dados" :visualization-config="visualizationConfig">
    <LxDataTableColumn field="nome" header="Nome" />
  </LxDataTable>
</template>

Exemplo com LxDataTable

Clique para visualizar o código

<script setup>
import { computed, ref } from 'vue';
import { LxDataTable, LxDataTableColumn, LxDataTableStyleSelector, TableStyle } from '@lde/lxcomponents';

const styleId = ref(TableStyle.COMPACT.id);

const dados = [
	{ id: 1001, produto: 'Notebook Pro 14', categoria: 'Tecnologia', estoque: 18, status: 'Ativo' },
	{ id: 1002, produto: 'Cadeira Office', categoria: 'Mobiliário', estoque: 7, status: 'Baixo estoque' },
	{ id: 1003, produto: 'Monitor 27', categoria: 'Tecnologia', estoque: 11, status: 'Ativo' },
	{ id: 1004, produto: 'Headset Studio', categoria: 'Acessórios', estoque: 0, status: 'Esgotado' }
];

const visualizationConfig = computed(() => ({
	size: styleId.value
}));

const statusClass = (status) =>
	({
		Ativo: 'text-bg-success',
		'Baixo estoque': 'text-bg-warning',
		Esgotado: 'text-bg-danger'
	})[status] ?? 'text-bg-secondary';
</script>

<template>
	<section class="lx-datatable-style-selector-example">
		<header class="lx-datatable-style-selector-example__header">
			<LxDataTableStyleSelector v-model="styleId" />
		</header>

		<LxDataTable :value="dados" data-key="id" :visualization-config="visualizationConfig">
			<LxDataTableColumn field="id" header="ID" header-style="width: 90px" />
			<LxDataTableColumn field="produto" header="Produto" />
			<LxDataTableColumn field="categoria" header="Categoria" />
			<LxDataTableColumn field="estoque" header="Estoque" header-style="width: 110px; text-align: center" />
			<LxDataTableColumn field="status" header="Status" header-style="width: 160px; text-align: center">
				<template #body="{ data }">
					<span class="badge" :class="statusClass(data.status)">{{ data.status }}</span>
				</template>
			</LxDataTableColumn>
		</LxDataTable>
	</section>
</template>

<style scoped>
.lx-datatable-style-selector-example {
	display: grid;
	gap: 1rem;
}

.lx-datatable-style-selector-example__header {
	display: flex;
	justify-content: flex-end;
}

.lx-datatable-style-selector-example__title {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
}

.lx-datatable-style-selector-example__description {
	margin: 0.25rem 0 0;
	color: var(--vp-c-text-2);
	font-size: 0.875rem;
}

@media (max-width: 768px) {
	.lx-datatable-style-selector-example__header {
		flex-direction: column;
		align-items: stretch;
	}
}
</style>

Formato do v-model

ℹ️ O v-model armazena o identificador do estilo selecionado (String).

import { TableStyle } from '@lde/lxcomponents';

const styleId = ref(TableStyle.COMPACT.id)      // 'sm' — compacto
// ou
const styleId = ref(TableStyle.COMFORTABLE.id)  // 'lg' — confortável

Use o styleId para controlar o size do LxDataTable via visualizationConfig.

Inicialização: ref(TableStyle.COMPACT.id) — nunca hardcode strings como 'sm'.

Propriedades

Nome	Descrição	Tipo	Padrão
id	Prefixo utilizado nos IDs dos botões internos	String	'lx-datatable-style'
modelValue	Estilo selecionado atualmente	String	'sm'
disabled	Desabilita a troca de estilo	Boolean	false

Eventos

Nome	Descrição	Payload
update:modelValue	Emitido quando o usuário seleciona outro estilo	string

Opções disponíveis

As opções padrão são expostas por TableStyle:

Chave	Valor emitido	Objetivo
TableStyle.COMPACT	small	Reduz a altura visual das linhas
TableStyle.COMFORTABLE	large	Mantém uma visualização mais espaçada