Help

Re: Can I Filter Tables available to TablePicker?

Solved
Jump to Solution
1343 0
cancel
Showing results for 
Search instead for 
Did you mean: 

I have a TablePickerSynced that I’d like to filter the options for. I’ve got the element conditionally disabled based on the presence of a selection in another TablePickerSynced:

<FormField label="Which table holds the Events/Bookings?">
    <TablePickerSynced
        globalConfigKey={GlobalConfigKeys.APPOINTMENTS_TABLE_ID}
        onChange={() => apptCheckTablesAreNotSame()}
        size="large"
        maxWidth="350px"
        disabled={!props.globalConfig.get(GlobalConfigKeys.PEOPLE_TABLE_ID)}
    />
</FormField>

…but I’d also like the Tables available to be picked in this second TablePickerSynced to be filtered to only include those Tables to which the table selected in the first TablePickerSynced (props.globalConfig.get(GlobalConfigKeys.PEOPLE_TABLE_ID)) has a Linked Record relationship.

Is this possible? I don’t see anything in the documentation that would indicate that it is, but I know the FieldPicker can at least disable certain options within the picker dropdown, so it seems like this kind of thing should be feasible.

1 Solution

Accepted Solutions
Emma_Yeap
Airtable Employee
Airtable Employee

Hi Jeremy,

This isn’t currently possible with a TablePicker - I’ve filed a task on our end to look at adding this!

You could implement this by manually filtering the tables and using a SelectSynced:

const base = useBase();
const linkedTables = base.tables.filter(table => {
    return yourCondition; // replace with your logic
});
const linkedTableOptions = linkedTables.map(table => {
    return {value: table.id, label: table.name};
});

...

return <SelectSynced
    options={linkedTableOptions}        
    globalConfigKey={GlobalConfigKeys.APPOINTMENTS_TABLE_ID}
/>

See Solution in Thread

2 Replies 2
Emma_Yeap
Airtable Employee
Airtable Employee

Hi Jeremy,

This isn’t currently possible with a TablePicker - I’ve filed a task on our end to look at adding this!

You could implement this by manually filtering the tables and using a SelectSynced:

const base = useBase();
const linkedTables = base.tables.filter(table => {
    return yourCondition; // replace with your logic
});
const linkedTableOptions = linkedTables.map(table => {
    return {value: table.id, label: table.name};
});

...

return <SelectSynced
    options={linkedTableOptions}        
    globalConfigKey={GlobalConfigKeys.APPOINTMENTS_TABLE_ID}
/>

Thanks, @Emma_Yeap - I was working on this very thing last night and couldn’t quite get it. This will help.