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.

Adding ability to use custom components

Improve the ability to use components for custom renders.

Master-Detail Row

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

Fixed issue with paginator and local datasource

Fixed Issue #433

Major version 2.0.0

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

Minor issues fixed

Fixed issues:

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

Add new function `renderDateTimeCell`

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

Update date-fns dependency to version 2.0

Update date-fns dependency to version 2.0

Fix onRowClickProxy

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.

Refresh Grid

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]}
/>