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

docs: make <DataTable /> reactive (#229)

Browse Source
This commit is contained in:
Jan Kremlacek 2023-12-30 03:20:10 +01:00 committed by GitHub
parent 5e22ffc037
commit 15c42f9ee0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
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({
data: props.data,
columns: props.columns,
get data() { return props.data },
get columns() { return props.columns },
getCoreRowModel: getCoreRowModel(),
})
</script>
@ -389,8 +389,8 @@ import {
} from "@tanstack/vue-table"
const table = useVueTable({
data: props.data,
columns: props.columns,
get data() { return props.data },
get columns() { return props.columns },
getCoreRowModel: getCoreRowModel(),
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"
const table = useVueTable({
data: props.data,
columns: props.columns,
get data() { return props.data },
get columns() { return props.columns },
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
})
@ -519,8 +519,8 @@ const props = defineProps<{
const sorting = ref<SortingState>([])
const table = useVueTable({
data: props.data,
columns: props.columns,
get data() { return props.data },
get columns() { return props.columns },
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
getSortedRowModel: getSortedRowModel(),
@ -621,8 +621,8 @@ const sorting = ref<SortingState>([])
const columnFilters = ref<ColumnFiltersState>([])
const table = useVueTable({
data: props.data,
columns: props.columns,
get data() { return props.data },
get columns() { return props.columns },
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
getSortedRowModel: getSortedRowModel(),
@ -715,8 +715,8 @@ const columnFilters = ref<ColumnFiltersState>([])
const columnVisibility = ref<VisibilityState>({})
const table = useVueTable({
data: props.data,
columns: props.columns,
get data() { return props.data },
get columns() { return props.columns },
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
getSortedRowModel: getSortedRowModel(),
@ -842,8 +842,8 @@ const columnVisibility = ref<VisibilityState>({})
const rowSelection = ref({})
const table = useVueTable({
data: props.data,
columns: props.columns,
get data() { return props.data },
get columns() { return props.columns },
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
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 table = useVueTable({
data: props.data,
columns: props.columns,
get data() { return props.data },
get columns() { return props.columns },
state: {
get sorting() { return sorting.value },
get columnFilters() { return columnFilters.value },