How do you add column visibility toggling and row selection to a TanStack Table?

Both are built-in. Column visibility lets users show/hide columns; row selection provides a managed selected-rows map for bulk actions.

<script setup lang="ts">
import {
  useVueTable, createColumnHelper, getCoreRowModel,
  type VisibilityState, type RowSelectionState,
} from "@tanstack/vue-table"
import { h, ref, computed } from "vue"

const colVis=ref<VisibilityState>({})
const rowSel=ref<RowSelectionState>({})

const ch=createColumnHelper<Person>()
const columns=[
  ch.display({
    id:"select",
    header:({table})=>h("input",{type:"checkbox",
      checked:table.getIsAllPageRowsSelected(),
      onChange:table.getToggleAllPageRowsSelectedHandler()}),
    cell:({row})=>h("input",{type:"checkbox",
      checked:row.getIsSelected(),
      onChange:row.getToggleSelectedHandler()}),
  }),
  ch.accessor("name",{header:"Name"}),
  ch.accessor("email",{header:"Email"}),
]

const table=useVueTable({
  get data(){ return data.value }, columns,
  state:{
    get columnVisibility(){ return colVis.value },
    get rowSelection(){ return rowSel.value },
  },
  onColumnVisibilityChange: v=>{ colVis.value=typeof v==="function"?v(colVis.value):v },
  onRowSelectionChange:     v=>{ rowSel.value=typeof v==="function"?v(rowSel.value):v },
  getCoreRowModel: getCoreRowModel(),
  enableRowSelection: true,
})
const selected=computed(()=>table.getSelectedRowModel().rows.map(r=>r.original))
</script>
<template>
  <label v-for="col in table.getAllLeafColumns()" :key="col.id">
    <input type="checkbox" :checked="col.getIsVisible()" @change="col.toggleVisibility()" />
    {{col.id}}
  </label>
  <p>{{selected.length}} rows selected</p>
</template>