标签: tanstack

如果单元格中有两个值，如何对列进行排序？

columnHelper.accessor('violations', {
  id: 'violations',
  header: () => <p>Violations</p>,
  cell: (info) => (
    <div>
      <p>{info.getValue().count}</p>
      <p>{info.getValue().percent}%</p>
    </div>
  ),
}),

如果有办法的话，能否提供一个实现的例子？

我有一个ColumnDef这样的：

export const columns: ColumnDef<Dispute>[] = [
  {
    id: 'select',
    header: ({ table }) => (
      <Checkbox
        checked={table.getIsAllPageRowsSelected()}
        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
        aria-label='Select all'
      />
    ),
    cell: ({ row }) => (
      <Checkbox
        checked={row.getIsSelected()}
        onCheckedChange={(value) => row.toggleSelected(!!value)}
        aria-label='Select row'
      />
    ),
    enableSorting: false,
    enableHiding: false,
  },
  {
    id: 'details',
    cell: ({ table }) => {
      return (
        <Button>
          <ArrowLeftFromLine />
        </Button>
      );
    },
  },
...

和这样的表：

export function DataTable<TData, TValue>({
  columns,
  data,
}: DataTableProps<TData, TValue>) {
  const [sorting, setSorting] …

将反应查询更新到最新版本后，使用 useMutation 时，“isLoading”状态未定义。这是代码：

const useAddUserNote = (owner: string) => {
  const queryClient = useQueryClient();
  const { mutate, error, data, isLoading } = useMutation({
    mutationFn: (note: CreateNoteData) => addUserNote(note),
    onSuccess: () => {
      queryClient.invalidateQueries(["allUserNotes", owner]);
    },
  });

  if (error instanceof Error) error;

  return { mutate, data, error, isLoading };
};

这是类型错误

Property 'isLoading' does not exist on type 'UseMutationResult<any, Error, CreateNoteData, unknown>'.

当我控制台记录“isLoading”时，它是未定义的

我正在努力使用 TantStack 和 React Table 库构建一个表。我想在表页脚中显示当前页面索引，例如“第 1 页，共 8 页”，其中“1”表示当前页码，“8”是总页数。我无法弄清楚如何从 TantStack 表状态访问当前页面索引。

它应该放置在这些按钮之间：

<Button
          variant="outline"
          size="sm"
          onClick={() => table.previousPage()}
          disabled={!table.getCanPreviousPage()}
        >
          Previous
        </Button>
        <Button
          variant="outline"
          size="sm"
          onClick={() => table.nextPage()}
          disabled={!table.getCanNextPage()}
        >
          Next
        </Button>