@airtable/blocks/ui#CellRenderer JavaScript Examples

The following examples show how to use @airtable/blocks/ui#CellRenderer. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: CustomCellRenderer.js    From apps-flashcard with MIT License 6 votes vote down vote up 
/**
 * Handles text and attachments to make them larger, but falls back to cell renderer for other
 * field types.
 */
export default function CustomCellRenderer({record, field}) {
    switch (field.type) {
        case FieldType.RICH_TEXT: {
            return <CellRenderer record={record} field={field} />;
        }
        case FieldType.MULTIPLE_ATTACHMENTS: {
            const attachmentCellValue = record.getCellValue(field);

            let attachmentObj;
            if (attachmentCellValue && attachmentCellValue.length > 0) {
                // Try to get the first attachment object from the cell value.
                attachmentObj = attachmentCellValue[attachmentCellValue.length - 1];
            }

            if (!attachmentObj || !attachmentObj.thumbnails || !attachmentObj.thumbnails.large) {
                // If there are no attachments present, use the default cell renderer
                return <CellRenderer record={record} field={field} />;
            }
            return <img src={attachmentObj.thumbnails.large.url} height="150px" />;
        }
        default: {
            return (
                <Text width="100%" size="xlarge">
                    {record.getCellValueAsString(field)}
                </Text>
            );
        }
    }
}
Example #2
Source File: index.js    From apps-print-records with MIT License 4 votes vote down vote up 
// Renders a single record from the Collections table with each
// of its linked Artists records.
function Record({record}) {
    const base = useBase();

    // Each record in the "Collections" table is linked to records
    // in the "Artists" table. We want to show the Artists for
    // each collection.
    const linkedTable = base.getTableByName('Artists');
    const linkedRecords = useRecords(
        record.selectLinkedRecordsFromCell('Artists', {
            // Keep the linked records sorted by their primary field.
            sorts: [{field: linkedTable.primaryField, direction: 'asc'}],
        }),
    );

    return (
        <Box marginY={3}>
            <Heading>{record.name}</Heading>
            <table style={{borderCollapse: 'collapse', width: '100%'}}>
                <thead>
                    <tr>
                        <td
                            style={{
                                whiteSpace: 'nowrap',
                                verticalAlign: 'bottom',
                            }}
                        >
                            <Heading variant="caps" size="xsmall" marginRight={3} marginBottom={0}>
                                On display?
                            </Heading>
                        </td>
                        <td style={{width: '50%', verticalAlign: 'bottom'}}>
                            <Heading variant="caps" size="xsmall" marginRight={3} marginBottom={0}>
                                Artist name
                            </Heading>
                        </td>
                        <td style={{width: '50%', verticalAlign: 'bottom'}}>
                            <Heading variant="caps" size="xsmall" marginBottom={0}>
                                Artworks
                            </Heading>
                        </td>
                    </tr>
                </thead>
                <tbody>
                    {linkedRecords.map(linkedRecord => {
                        // Render a check or an x depending on if the artist is on display or not.
                        const isArtistOnDisplay = linkedRecord.getCellValue('On Display?');
                        return (
                            <tr key={linkedRecord.id} style={{borderTop: '2px solid #ddd'}}>
                                <td style={{textAlign: 'center', whiteSpace: 'nowrap'}}>
                                    <Box
                                        display="inline-flex"
                                        alignItems="center"
                                        justifyContent="center"
                                        width="16px"
                                        height="16px"
                                        marginRight={3}
                                        borderRadius="100%"
                                        backgroundColor={isArtistOnDisplay ? 'green' : 'red'}
                                        textColor="white"
                                    >
                                        <Icon name={isArtistOnDisplay ? 'check' : 'x'} size={12} />
                                    </Box>
                                </td>
                                <td style={{width: '50%'}}>
                                    <Text marginRight={3}>{linkedRecord.name}</Text>
                                </td>
                                <td style={{width: '50%'}}>
                                    <CellRenderer
                                        record={linkedRecord}
                                        field={linkedTable.getFieldByName('Attachments')}
                                    />
                                </td>
                            </tr>
                        );
                    })}
                </tbody>
            </table>
        </Box>
    );
}