Niklas/shadcn-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: make <DataTable /> reactive

Browse Source
This commit is contained in:
Jan Kremlacek 2023-12-29 18:58:06 +01:00
parent c75b40245f
commit 761d634b77
2 changed files with 20 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
apps/www/src/content/docs/components/data-table.md
View File

@ -173,8 +173,8 @@ const props = defineProps<{
}>() }>()
const table = useVueTable({ const table = useVueTable({
data: props.data, get data() { return props.data },
columns: props.columns, get columns() { return props.columns },
getCoreRowModel: getCoreRowModel(), getCoreRowModel: getCoreRowModel(),
}) })
</script> </script>
@ -389,8 +389,8 @@ import {
} from "@tanstack/vue-table" } from "@tanstack/vue-table"
const table = useVueTable({ const table = useVueTable({
data: props.data, get data() { return props.data },
columns: props.columns, get columns() { return props.columns },
getCoreRowModel: getCoreRowModel(), getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(), getPaginationRowModel: getPaginationRowModel(),
}) })
@ -408,8 +408,8 @@ We can add pagination controls to our table using the `<Button />` component and
import { Button } from "@/components/ui/button" import { Button } from "@/components/ui/button"
const table = useVueTable({ const table = useVueTable({
data: props.data, get data() { return props.data },
columns: props.columns, get columns() { return props.columns },
getCoreRowModel: getCoreRowModel(), getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(), getPaginationRowModel: getPaginationRowModel(),
}) })
@ -519,8 +519,8 @@ const props = defineProps<{
const sorting = ref<SortingState>([]) const sorting = ref<SortingState>([])
const table = useVueTable({ const table = useVueTable({
data: props.data, get data() { return props.data },
columns: props.columns, get columns() { return props.columns },
getCoreRowModel: getCoreRowModel(), getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(), getPaginationRowModel: getPaginationRowModel(),
getSortedRowModel: getSortedRowModel(), getSortedRowModel: getSortedRowModel(),
@ -621,8 +621,8 @@ const sorting = ref<SortingState>([])
const columnFilters = ref<ColumnFiltersState>([]) const columnFilters = ref<ColumnFiltersState>([])
const table = useVueTable({ const table = useVueTable({
data: props.data, get data() { return props.data },
columns: props.columns, get columns() { return props.columns },
getCoreRowModel: getCoreRowModel(), getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(), getPaginationRowModel: getPaginationRowModel(),
getSortedRowModel: getSortedRowModel(), getSortedRowModel: getSortedRowModel(),
@ -715,8 +715,8 @@ const columnFilters = ref<ColumnFiltersState>([])
const columnVisibility = ref<VisibilityState>({}) const columnVisibility = ref<VisibilityState>({})
const table = useVueTable({ const table = useVueTable({
data: props.data, get data() { return props.data },
columns: props.columns, get columns() { return props.columns },
getCoreRowModel: getCoreRowModel(), getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(), getPaginationRowModel: getPaginationRowModel(),
getSortedRowModel: getSortedRowModel(), getSortedRowModel: getSortedRowModel(),
@ -842,8 +842,8 @@ const columnVisibility = ref<VisibilityState>({})
const rowSelection = ref({}) const rowSelection = ref({})
const table = useVueTable({ const table = useVueTable({
data: props.data, get data() { return props.data },
columns: props.columns, get columns() { return props.columns },
getCoreRowModel: getCoreRowModel(), getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(), getPaginationRowModel: getPaginationRowModel(),
getSortedRowModel: getSortedRowModel(), getSortedRowModel: getSortedRowModel(),

4
apps/www/src/examples/tasks/components/DataTable.vue
View File

@ -42,8 +42,8 @@ const columnVisibility = ref<VisibilityState>({})
const rowSelection = ref({}) const rowSelection = ref({})
const table = useVueTable({ const table = useVueTable({
data: props.data, get data() { return props.data },
columns: props.columns, get columns() { return props.columns },
state: { state: {
get sorting() { return sorting.value }, get sorting() { return sorting.value },
get columnFilters() { return columnFilters.value }, get columnFilters() { return columnFilters.value },