flat-fuchsia

filter rows based on the row.original?

Is there a built-in way to filter the rows based on a value not visible in the table? My rows have a revokedAt column which isn't part of the columns, but i want to be able to toggle whether i show them or not. I did it the react way like this but it feels very hacky, is there a built in for this?' afternote: this breaks a lot of other stuff so feels way wrong

export function DataTable(props: { data: ApiKeyColumn[] }) {
  const [rowSelection, setRowSelection] = useState({});
  const [visibleRows, setVisibleRows] = useState<ApiKeyColumn[]>(props.data);
  const [showRevoked, setShowRevoked] = useState(true);

  const table = useReactTable({
    data: visibleRows,
    columns,
    getCoreRowModel: getCoreRowModel(),
    onRowSelectionChange: setRowSelection,
    enableRowSelection: (row) => {
      return row.original.revokedAt === null;
    },
    getFilteredRowModel: getFilteredRowModel(),
    state: {
      rowSelection,
    },
  });

  return (
    <div>
      <div className="flex items-center gap-2 py-2">
        <Label>Show revoked</Label>
        <Checkbox
          checked={showRevoked}
          onCheckedChange={(c) => {
            setShowRevoked(!!c);

            // This feels unperformant, is there a built in way to @tanstack/table to filter rows?
            setVisibleRows(
              props.data.filter((row) => {
                return c || row.revokedAt === null;
              }),
            );
          }}
          className="max-w-sm"
        />
      </div>

export function DataTable(props: { data: ApiKeyColumn[] }) {
  const [rowSelection, setRowSelection] = useState({});
  const [visibleRows, setVisibleRows] = useState<ApiKeyColumn[]>(props.data);
  const [showRevoked, setShowRevoked] = useState(true);

  const table = useReactTable({
    data: visibleRows,
    columns,
    getCoreRowModel: getCoreRowModel(),
    onRowSelectionChange: setRowSelection,
    enableRowSelection: (row) => {
      return row.original.revokedAt === null;
    },
    getFilteredRowModel: getFilteredRowModel(),
    state: {
      rowSelection,
    },
  });

  return (
    <div>
      <div className="flex items-center gap-2 py-2">
        <Label>Show revoked</Label>
        <Checkbox
          checked={showRevoked}
          onCheckedChange={(c) => {
            setShowRevoked(!!c);

            // This feels unperformant, is there a built in way to @tanstack/table to filter rows?
            setVisibleRows(
              props.data.filter((row) => {
                return c || row.revokedAt === null;
              }),
            );
          }}
          className="max-w-sm"
        />
      </div>

3 Replies

flat-fuchsiaOP•3y ago

or is the best solution just to do conditional render of the row based on the condition?

flat-fuchsiaOP•3y ago

wise-white•3y ago

Conditional render in the table itself would be my preference and I believe preferred practice for this library.

Gaming

Programming

filter rows based on the row.original?

Did you find this page helpful?