tubular-react-common
tubular-react-common functions and hooks.
useGridRefresh
useGridRefresh contains a state hook conformed by a number that initaly is zero, and returns the number and a function that adds one to the number each time that the the hook is executed
PARAMETERS
No parameters
RETURN
Number - Number of refreshings executed over the grid - Initial value: 0.
Function - That adds another count whenever grid is refreshed.
const UseTubularExample = () => {
const [refresh, forceRefresh] = useGridRefresh();
const forceGridRefresh = () => {
setTimeout(() => {
forceRefresh();
}, 8000);
};
return (
<>
< button onClick={() => forceGridRefresh()}>Force Refresh</button>
< DataTable
gridName="tbTable"
columns={columns}
dataSource="https://tubular.azurewebsites.net/api/orders/paged"
deps={[refresh]}
/>
</>
);
};
Open CodeSandbox
useMasterDetails
useMasterDetails contains a state hook conformed by a boolean, and returns the boolean and a function to change the boolean to the opposite value.
PARAMETERS
No parameters
RETURN
Boolean - Flag to toggle use of master details.
Function - Function to toggle the value of the flag.
const MasterDetailRow = ({ columns, row, index }) => {
const [open, openDetails] = useMasterDetails();
const openMasterDetails = () => {
openDetails();
};
return (
<>
< tr key={index}>
< td role="row" key={row.OrderID}>
< span style=>
Order {row[columns[0].name]}
< /span>
< button onClick={openMasterDetails}>Show details</button>
< /td>
< /tr>
{open && (
< tr key={index}>
{columns
.filter(col => col.visible)
.map(col => {
return (
< td role="cell" key={col.name}>
{row[col.name]}
< /td>
);
})}
< /tr>
)}
</>
);
};
Open CodeSandbox
useTbList
This hook handles the process of getting a external resource like a fetch or reading a file, and prevent updating the react state if the component is unmounted before the resource is loaded.
PARAMETERS
| Type | Description | Optional |
|---|---|---|
| Function | The function that will get the data. | No |
| Object | Initial value or initial model. | No |
| Array | An array of variables that the effect depends on. | No |
RETURN
Object - The value that is returned by the effect function when the data has been loaded, otherwise the initialValue.
Boolean - A flag that indicates if the data has been fetched or not.
const UseTbListExample: React.FunctionComponent = () => {
const tbList = useTbList(
columns,
"https://tubular.azurewebsites.net/api/orders/paged"
);
return (
< button>Sort by</button>
< TbList
tbInstance={tbList}
listItemComponent={MyListItem}
onItemClick={rowClick}
/>
);
};
Open CodeSandbox
useTbTable
useTbTable hook returns a tubular table instance conformer by a tubular API that returns a set of functions that you can execute over your source data and a tubular state with all the tubular properties, this allows manipulating all the tubular features, performing changes in our tubular instance.
PARAMETERS
| Type | Description | Optional |
|---|---|---|
| Array | Array with the column model description. | No |
| Object | The source of data. | No |
| Object | Options that you can set up if you want a particular behavior on the grid. If you don’t send them, the hook creates them with default values. | Yes |
RETURN
Object - A Tubular state with all the tubular properties. Function - A Tubular instance conformer that returns a set of functions to execute over your source data.
const UseTbTableExample = () => {
const { state, api } = useTbTable(columns, localData);
return (
<>
< tr role="rowheader">
{state.columns
.filter(col => col.visible)
.map(col => {
return < th key={col.name}>{col.label}< /th>;
})}
< /tr>
{state.data.map((row, index) => {
return (
< tr key={index}>
{state.columns
.filter(col => col.visible)
.map(col => {
return (
< td role="cell" key={col.name}>
{row[col.name]}
< /td>
);
})}
< /tr>
);
})}
< button onClick={() => api.goToPage(state.page + 1)}>
Go to next page
< /button>
< button onClick={() => api.goToPage(state.page - 1)}>
Go to previous page
< /button>
< button onClick={() => api.sortColumn("CustomerName")}>
Sort by Customer Name
< /button>
</>
);
};
Open CodeSandbox
useTubular
This hook allows manipulating all the Tubular features, performing changes in our Tubular instance.
PARAMETERS
| Type | Description | Optional |
|---|---|---|
| Array | Array with the column model description. | No |
| Object | The source of data. | No |
| Object | Options that you can set up if you want a particular behavior on the grid. If you don’t send them, the hook creates them with default values. | Yes |
RETURN
Object - A Tubular state with all the tubular properties. Function - A Tubular instance conformer that returns a set of functions to execute over your source data.
const UseTubularExample = () => {
const { state, api } = useTubular(columns, localData);
return (
<>
< table>
< thead>
< tr role="rowheader">
{state.columns
.filter(col => col.visible)
.map(col => {
return < th key={col.name}>{col.label}< /th>;
})}
< /tr>
< /thead>
< tbody>
{state.data.map((row, index) => {
return (
< tr key={index}>
{state.columns
.filter(col => col.visible)
.map(col => {
return (
< td role="cell" key={col.name}>
{row[col.name]}
< /td>
);
})}
< /tr>
);
})}
< /tbody>
< /table>
< button onClick={() => api.goToPage(state.page + 1)}>
Go to next page
< /button>
< button onClick={() => api.goToPage(state.page - 1)}>
Go to previous page
< /button>
< button onClick={() => api.sortColumn("CustomerName")}>
Sort by Customer Name
< /button>
</>
);
};
Open CodeSandbox