Tubular unchained

The original purpose of this change was to integrate existing tubular implementation into a list. But after multiple reviews, I decided to split the logic to improve implementation of tubular based on the underlying component.

That's why, I added new hooks:

• useTubular: This is the core hook. It contains most of the tubular logic/state. This hook should be used whenever implementing a new component using tubular core logic.
• useTbList: This is the hook for list components. It "inherits" logic/state from useTubular and adds special effect to deal with loading rows without a paginator.
• useTbTable: This is the replacement for useDataGrid hook. It "inherits" logic/state from useTubular and adds special logic to deal with the data table.

The DataGrid component signature was not changed, but the underlying code was in order to use new useTbTable.

useTbList

This hook is intended to be used along with TbList component:

const tbList = useTbList(
  columns,
  'https://tubular.azurewebsites.net/api/orders/paged',
);

<div style={{ width: '250px', height: '100%' }}>
  <TbList
    tbInstance={tbList}
    listItemComponent={MyListItem}
    onItemClick={rowClick}
  />
</div>

// This is the custom list item component
const MyListItem: React.FunctionComponent = ({ rowStyle, selectedIndex, onItemClick, row }: any) => {
  return (
    <ListItem
      button={true}
      selected={selectedIndex === 0}
      onClick={onItemClick}
      style={rowStyle}
    >
      <ListItemText primary={`${row.OrderID} - ${row.CustomerName}`} />
    </ListItem>
  );
};

If you want to add sorting/searching features to your list, it is just a matter of using tbList.api. For example, this is a handler for a sortEvent:

const sortEvent = (columnName) => {
  tbList.api.sortByColumn(columnName);
};

sortByColumn contains logic to deal with details on the infinite loader. It is different from the original sortColumn method from useDataGrid.

Please keep in mind that our docs are not up-to-date (we will be working on that ASAP). But if you want to see a working example, please check the ones that are included on the project.