How to use tubular-react-common - 3 common examples

const TbListExample: React.FunctionComponent = () => {
  const [data, setData] = React.useState(localData);
  const tbList = useTbList(
    columns,
    'https://tubular.azurewebsites.net/api/orders/paged',
  );

  const rowClick = (row: any) => {
    console.log('You clicked on a row: ', row);
  };

  const handleAddRow = () => {
    setData([...data, {
      Amount: 150.00,
      CustomerName: 'Tiempo Development',
      OrderID: 23,
      ShippedDate: '2016-01-04T18:00:00',
      ShipperCity: 'Monterrey, NL, Mexico',
    }]);

const rowRenderer = (props: any) => {
        const { index, key, style } = props;
        const row = items[index];
        const itemClickProxy = generateOnRowClickProxy(onItemClick)(row);
        const isPlaceholder = !isItemLoaded(index) || !items[index];
        const itemToRender = (
            
        );

        const placeholderItem = placeholderStyle => {
            const placeholderMessage = noRecordsFound ? 'No records found' : 'Loading...';
            return (

deps,
        footerComponent,
        gridName,
        mobileBreakpointWidth = props.mobileBreakpointWidth || 800,
        onError,
        onRowClick,
        rowComponent,
        rowMobileComponent,
        storage,
        toolbarOptions = props.toolbarOptions || new ToolbarOptions(),
        detailComponent,
    } = props;

    const classes = useStyles({});

    const tbTableInstance = useTbTable(columns, dataSource, {
        callbacks: { onError },
        componentName: gridName,
        deps,
        pagination: {
            itemsPerPage: toolbarOptions.itemsPerPage,
        },
        storage,
    });

    const [isMobileResolution] = useResolutionSwitch(mobileBreakpointWidth, timeout);

    if (isMobileResolution) {
        toolbarOptions.SetMobileMode();

        return (