Tubular React Versions Save

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.

Improve the ability to use components for custom renders.

Support the Master-Detail, check the Sample project for code and demo.

Fixed Issue #433

Ported several common classes and functions from this repository to Tubular Common.

Fixed issues:

• Export invisible columns #407
• Multisorting not working #406

Use the new function renderDateTimeCell to avoid using date-fns/format directly in a bodyRender.

Update date-fns dependency to version 2.0

bodyRenderer param was missing onRowClickProxy param for some components.

Also, there was an issue when using a custom bodyRenderer which was not creating closure for onRowClickProxy properly.

This is a proposal to include ability to refresh the grid. The approach I'm taking is providing a deps prop that can be provided to the useDataGrid hook, so that any relying party can have control over the refresh on the grid.

In order to implement this functionality you just need to create the dependency, for example:

// The refresh is for the deps prop and the forceRefresh method
// will be the one to call to make the grid execute the refresh method
const [refresh, forceRefresh] = useGridRefresh();

const forceGridRefresh = () => {
  forceRefresh();
};

<button onClick={forceGridRefresh}>Force refresh</button>
<DataGrid
  ...
  deps={[refresh]}
/>