Help

Re: Filter custom block content by Airtable View

Solved
Jump to Solution
484 0
cancel
Showing results for 
Search instead for 
Did you mean: 
Sumit_Kapoor
4 - Data Explorer
4 - Data Explorer

Is there a way to create a Dropdown Menu inside a custom Block to filter by own configured Airtable Views?

I’am not quite sure if this is what would work for my case.
Is there any Example Demo/Code for that?

Thanks!

1 Solution

Accepted Solutions
Rick_Waldron
4 - Data Explorer
4 - Data Explorer

Can I assume that you’re programming this custom Block? If so, then I believe what you’re looking for is ViewPicker:

import React, { useState } from "react";
import { ViewPicker, useBase } from "@airtable/blocks/ui";
const ViewPickerExample = () => {
  const [view, setView] = useState(null);
  const base = useBase();
  const table = base.getTableByNameIfExists("Tasks");
  // If table is null or undefined, the ViewPicker will not render.
  return (
    <ViewPicker
      table={table}
      view={view}
      onChange={newView => setView(newView)}
      width="320px"
    />
  );
};

You can sync that up to globalConfig, with ViewPickerSynced:

import React from "react";
import { useBase, ViewPickerSynced } from "@airtable/blocks/ui";
const ViewPickerSyncedExample = () => {
  const base = useBase();
  const table = base.getTableByNameIfExists("Tasks");
  // If table is null or undefined, the ViewPickerSynced will not render.
  return (
    <ViewPickerSynced table={table} globalConfigKey="viewId" width="320px" />
  );
};

See Solution in Thread

1 Reply 1
Rick_Waldron
4 - Data Explorer
4 - Data Explorer

Can I assume that you’re programming this custom Block? If so, then I believe what you’re looking for is ViewPicker:

import React, { useState } from "react";
import { ViewPicker, useBase } from "@airtable/blocks/ui";
const ViewPickerExample = () => {
  const [view, setView] = useState(null);
  const base = useBase();
  const table = base.getTableByNameIfExists("Tasks");
  // If table is null or undefined, the ViewPicker will not render.
  return (
    <ViewPicker
      table={table}
      view={view}
      onChange={newView => setView(newView)}
      width="320px"
    />
  );
};

You can sync that up to globalConfig, with ViewPickerSynced:

import React from "react";
import { useBase, ViewPickerSynced } from "@airtable/blocks/ui";
const ViewPickerSyncedExample = () => {
  const base = useBase();
  const table = base.getTableByNameIfExists("Tasks");
  // If table is null or undefined, the ViewPickerSynced will not render.
  return (
    <ViewPickerSynced table={table} globalConfigKey="viewId" width="320px" />
  );
};