Global filter, column filter in vue-table v8
This is my first time using tanstack-table +vue3. However, I couldn't find many tutorials and documentation for vue that tanstack provides or tutorials from the internet. Below is the code I am using to use table-tanstack. I haven't done the column filter yet because I don't know how to set it up and use it.
I have the following request:
- I have a data input. When I press the search button, I will perform a column filter from that input box to the "title" column.
My code is below:
const columnsTable = [
{
header: '公開日',
enableSorting: false,
cell: ({ row }) =>
format(new Date(row.original.published_start), FORMAT_DATE)
},
{
accessorKey: 'title',
header: 'タイトル',
enableSorting: false
},
{
accessorKey: 'content',
header: '内容',
enableSorting: false
}
];
const table = useVueTable({
data: props.notifications,
columns: columnsTable,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
getFilteredRowModel: getFilteredRowModel(),
initialState: {
pagination: {
pageSize: 10
}
},
state: {
get globalFilter() {
return dataSearch.value;
}
}
});
I have the following request:
- I have a data input. When I press the search button, I will perform a column filter from that input box to the "title" column.
My code is below:
const columnsTable = [
{
header: '公開日',
enableSorting: false,
cell: ({ row }) =>
format(new Date(row.original.published_start), FORMAT_DATE)
},
{
accessorKey: 'title',
header: 'タイトル',
enableSorting: false
},
{
accessorKey: 'content',
header: '内容',
enableSorting: false
}
];
const table = useVueTable({
data: props.notifications,
columns: columnsTable,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
getFilteredRowModel: getFilteredRowModel(),
initialState: {
pagination: {
pageSize: 10
}
},
state: {
get globalFilter() {
return dataSearch.value;
}
}
});
