How to use @salesforce/design-system-react - 6 common examples

);

    // Get JS globals
    let GLOBALS = {};
    try {
      const globalsEl = document.getElementById('js-globals');
      if (globalsEl) {
        GLOBALS = JSON.parse(globalsEl.textContent);
      }
    } catch (err) {
      logError(err);
    }
    window.GLOBALS = GLOBALS;

    // Set App element (used for react-SLDS modals)
    settings.setAppElement(el);

    ReactDOM.render(
      
        
          
            
          
        
      ,
      el,

onSelect={item => {
                                    console.log(item, " Selected");
                                }}
                                options={[
                                    {type: "section", label: "SECTION 1"},
                                    {label: "Paddy's Pub"},
                                    {label: "Tyrell Corp"},
                                    {type: "section", label: "SECTION 2"},
                                    {label: "Paper St. Soap Company"},
                                    {label: "Nakatomi Investments"},
                                    {label: "Acme Landscaping"},
                                    {type: "section", label: "SECTION 3"},
                                    {label: "Acme Construction"},
                                ]}
                                sectionDividerRenderer={
                                    Lookup.DefaultSectionDivider
                                }
                            />
                        
                        <div>
                             {
                                        const selection =
                                            data.selection.length === 0
                                                ? this.state.leadSourceSelection
                                                : data.selection;
                                        console.log(
                                            "selected: ",
                                            selection[0].label
                                        );
                                        this.setState({</div>

const ClickableDataTableCell = ({children, ...props}) => {
    return (
        
            <div>
                <a> {
                        props.onClick(props.item);
                    }}
                    style={{cursor: "pointer"}}&gt;
                    {children}
                </a>
            </div>
        
    );
};
ClickableDataTableCell.displayName = DataTableCell.displayName;

const ImageDataTableCell = ({children, ...props}) =&gt; {
    return (
        
            <img style="{{maxWidth:" alt="" src="{props.item[props.property]}">
        
    );
};
ImageDataTableCell.displayName = DataTableCell.displayName;

<div style="{{alignItems:">
                <div>{children}</div>
                <div> commentableRecord.setDom(c)}
                    style={{marginLeft: 5}}&gt;
                    
                </div>
            </div>
        
    );
};
CommentableDataTableCell.displayName = DataTableCell.displayName;

const ClickableDataTableCell = ({children, ...props}) =&gt; {
    return (
        
            <div>
                <a> {
                        props.onClick(props.item);
                    }}
                    style={{cursor: "pointer"}}&gt;
                    {children}
                </a>
            </div>
        
    );
};

DataTableCell,
    DataTableColumn,
    Spinner,
} from "@salesforce/design-system-react";

const ClickableDataTableCell = ({children, ...props}) => 
    <div> {
            props.onClick(props.item);
        }}
        style={{cursor: "pointer"}}&gt;
        <a>{children}</a>
    </div>
;
ClickableDataTableCell.displayName = DataTableCell.displayName;

const LabelDataTableCell = ({children, ...props}) =&gt; 
    <div> {
            props.onClick(props.item);
        }}
        style={{cursor: "pointer"}}&gt;
        <a>{decode(props.item.label)}</a>
    </div>
;
LabelDataTableCell.displayName = DataTableCell.displayName;

const MomentDataTableCell = ({children, ...props}) =&gt;

<a>{decode(props.item.label)}</a>
    
;
LabelDataTableCell.displayName = DataTableCell.displayName;

const MomentDataTableCell = ({children, ...props}) =&gt; 
    <div> {
            props.onClick(props.item);
        }}
        style={{cursor: "pointer"}}&gt;
        <a>{decode(moment(props.item.lastModifiedDate).fromNow())}</a>
    </div>
;
MomentDataTableCell.displayName = DataTableCell.displayName;

const FolderDataTableCell = ({children, ...props}) =&gt; 
    <a>{decode(props.item.folder.label)}</a>
;
FolderDataTableCell.displayName = DataTableCell.displayName;

const HEIGHT = 500;

export default class DashboardPicker extends React.Component {
    static propTypes = {
        dashboards: PropTypes.array,
        totalDashboardLength: PropTypes.number,
        isFiltering: PropTypes.bool,