Table

<flt-table [columns]="columns" [rows]="rows" rowKey="id" caption="Últimos movimientos">
  <ng-template fltTableCell="status" let-row>
    <flt-tag [variant]="variant(row['status'])" size="sm">{{ row['status'] }}</flt-tag>
  </ng-template>
</flt-table>

columns = [
  { key: 'date', header: 'Fecha', format: 'date' },
  { key: 'concept', header: 'Concepto' },
  { key: 'status', header: 'Estado' },
  { key: 'amount', header: 'Importe', format: 'currency' }, // céntimos
];

<FltTable :columns="columns" :rows="rows" row-key="id" caption="Últimos movimientos">
  <template #cell-status="{ value }">
    <FltTag :variant="statusVariant[value]" size="sm">{{ value }}</FltTag>
  </template>
</FltTable>

<flt-table [columns]="columns" [rows]="rows" rowKey="id" rowLabelKey="concept"
  caption="Movimientos para conciliar" selectable [(selection)]="selection" />

<FltTable v-model:selection="selection" :columns="columns" :rows="rows" row-key="id"
  row-label-key="concept" caption="Movimientos para conciliar" selectable />

<flt-table [columns]="columns" [rows]="rows()" [canEdit]="canEdit" [rowErrors]="rowErrors()"
  rowKey="id" caption="Movimientos editables" editable (rowSave)="save($event)" />

columns = [
  { key: 'concept', header: 'Concepto', editor: 'text',
    validate: (v) => (String(v).trim() ? null : 'Escribe un concepto') },
  { key: 'amount', header: 'Importe', format: 'currency', editor: 'currency' },
];

// Sin Promises: la tabla espera a que lleguen filas nuevas o errores.
save({ key, changes }) {
  this.api.save(key, changes).subscribe({
    next: (rows) => this.rows.set(rows),
    error: (errors) => this.rowErrors.set(errors), // { campo: mensaje, _row: mensaje }
  });
}

<FltTable :columns="columns" :rows="rows" :can-edit="canEdit" :row-errors="rowErrors"
  row-key="id" caption="Movimientos editables" editable @row-save="save" />

function save({ key, changes }) {
  api.save(key, changes).then(
    (newRows) => (rows.value = newRows),
    (errors) => (rowErrors.value = errors), // { campo: mensaje, _row: mensaje }
  );
}

<flt-table [columns]="columns" [rows]="rows" [rowActions]="actions" rowKey="id"
  rowLabelKey="concept" caption="Movimientos en tarjetas" selectable paginated cards
  [(selection)]="selection" />

<FltTable v-model:selection="selection" :columns="columns" :rows="rows" :row-actions="actions"
  row-key="id" row-label-key="concept" caption="Movimientos en tarjetas" selectable paginated cards />

<flt-table [columns]="columns" [rows]="rows" rowKey="id" caption="Movimientos con detalle y total"
  expandable paginated>
  <ng-template fltTableExpanded let-row>
    <flt-description-list [items]="detail(row)" />
  </ng-template>
</flt-table>

columns = [..., { key: 'amount', header: 'Importe', format: 'currency', total: 'sum' }];

<FltTable :columns="columns" :rows="rows" row-key="id" caption="Movimientos con detalle y total"
  expandable paginated>
  <template #expanded="{ row }">
    <FltDescriptionList :items="detail(row)" />
  </template>
</FltTable>

<flt-table [columns]="columns" [rows]="rows" [size]="size()" rowKey="id"
  caption="Movimientos con todas sus columnas" selectable paginated
  columnChooser stickyFirstColumn [(hiddenColumns)]="hidden">
  <flt-segmented fltTableFilters [options]="densityOptions" [(value)]="density" label="Densidad" size="sm" />
</flt-table>

columns = [
  { key: 'concept', header: 'Concepto', hideable: false },
  ...
];

<FltTable v-model:hidden-columns="hidden" :columns="columns" :rows="rows" :size="density"
  row-key="id" caption="Movimientos con todas sus columnas" selectable paginated
  column-chooser sticky-first-column>
  <template #filters>
    <FltSegmented v-model="density" :options="densityOptions" label="Densidad" size="sm" />
  </template>
</FltTable>

<flt-table [columns]="columns" [rows]="rows" [filters]="filters()" rowKey="id"
  caption="Buscar en el histórico" searchable paginated>
  <flt-segmented fltTableFilters [options]="statusOptions" [(value)]="status" label="Estado" size="sm" />
</flt-table>

filters = computed(() =>
  this.status() === 'all' ? {} : { status: { type: 'options', values: [this.status()] } },
);

<FltTable :columns="columns" :rows="rows" :filters="filters" row-key="id"
  caption="Buscar en el histórico" searchable paginated>
  <template #filters>
    <FltSegmented v-model="status" :options="statusOptions" label="Estado" size="sm" />
  </template>
</FltTable>

const filters = computed(() =>
  status.value === 'all' ? {} : { status: { type: 'options', values: [status.value] } },
);

<flt-table [columns]="columns" [rows]="rows" rowKey="id" caption="Movimientos con acciones"
  selectable [rowActions]="actions" [(selection)]="selection" (rowAction)="run($event)">
  <flt-button fltTableBulk variant="outline" size="sm" (pressed)="markReviewed()">
    Marcar como revisados
  </flt-button>
</flt-table>

actions = [
  { id: 'view', label: 'Ver' },
  { id: 'refund', label: 'Devolver', disabled: (row) => row.amount > 0 },
];

<FltTable v-model:selection="selection" :columns="columns" :rows="rows" row-key="id"
  caption="Movimientos con acciones" selectable :row-actions="actions" @row-action="run">
  <template #bulk-actions="{ selection }">
    <FltButton variant="outline" size="sm" @pressed="markReviewed(selection)">
      Marcar como revisados
    </FltButton>
  </template>
</FltTable>

<flt-table [columns]="columns" [rows]="rows" rowKey="id" caption="Histórico de movimientos"
  paginated [(page)]="page" [(pageSize)]="pageSize" />

<FltTable v-model:page="page" v-model:page-size="pageSize" :columns="columns" :rows="rows"
  row-key="id" caption="Histórico de movimientos" paginated />

<flt-table [columns]="columns" [rows]="rows" rowKey="id" caption="Movimientos para revisar"
  selectable paginated grid [(selection)]="selection">
  <ng-template fltTableCell="detail" let-row>
    <a class="flt-link" [href]="'#movimiento-' + row['id']">Ver detalle</a>
  </ng-template>
</flt-table>

<FltTable v-model:selection="selection" :columns="columns" :rows="rows" row-key="id"
  caption="Movimientos para revisar" selectable paginated grid>
  <template #cell-detail="{ row }">
    <a class="flt-link" :href="'#movimiento-' + row.id">Ver detalle</a>
  </template>
</FltTable>

<flt-table [columns]="columns" [rows]="rows()" rowKey="id" caption="Movimientos"
  mode="server" paginated searchable [totalRows]="total()" [loading]="loading()" (queryChange)="load($event)" />

async load(query: FltTableQuery) {
  this.loading.set(true);
  const page = await this.api.movements(query); // { sort, page, pageSize, search, filters }
  this.rows.set(page.rows);
  this.total.set(page.total);
  this.loading.set(false);
}

<FltTable :columns="columns" :rows="rows" row-key="id" caption="Movimientos"
  mode="server" paginated searchable :total-rows="total" :loading="loading" @query-change="load" />

async function load(query: FltTableQuery) {
  loading.value = true;
  const page = await api.movements(query); // { sort, page, pageSize, search, filters }
  rows.value = page.rows;
  total.value = page.total;
  loading.value = false;
}

<flt-table [columns]="columns" rowKey="id" caption="Cargando movimientos" loading />
<flt-table [columns]="columns" [rows]="[]" rowKey="id" caption="Movimientos de noviembre"
  emptyText="No hay movimientos en este periodo." />

<FltTable :columns="columns" row-key="id" caption="Cargando movimientos" loading />
<FltTable :columns="columns" :rows="[]" row-key="id" caption="Movimientos de noviembre"
  empty-text="No hay movimientos en este periodo." />