Skip to content

docs(AnalyticalTable): update react-table v7 links #4651

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
May 30, 2023
Merged

docs(AnalyticalTable): update react-table v7 links #4651

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions packages/main/src/components/AnalyticalTable/Recipes.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,9 @@ import { MessageStrip } from '../../webComponents/index';

## How to add your own plugin hooks?

The `AnalyticalTable` internally uses all plugin hooks of the [react-table](https://github.com/tannerlinsley/react-table) except for `usePagination` and hooks that change the layout.
The `AnalyticalTable` internally uses all plugin hooks of the [react-table v7](https://github.com/TanStack/table/blob/v7/docs/src/pages/docs/api/overview.md) except for `usePagination` and hooks that change the layout.
If you pass a `react-table` hook to the `tableHooks` prop of the `AnalyticalTable` you will most likely experience some side effects or even break the table completely. We therefore strongly recommend to just not do it ;).
If you encounter a functionality that should be available with `react-table` hooks, but isn't in the `AnalyticalTable` please open an issue in github or write us in Slack.
If you encounter a functionality that should be available with `react-table` hooks, but isn't in the `AnalyticalTable` please open an issue in GitHub.

<MessageStrip
type="Warning"
Expand All @@ -36,7 +36,7 @@ export const TableWithCustomHook = (props) => {
```

With the `customHook` callback you can plugin in all available hooks. Please note that some hooks need a return value (e.g. `columns`) which is then always the first parameter of the function, and others are not allowed to return a value (e.g. `useTable`).
For further details please refer to the [`react-table` documentation](https://react-table-v7.tanstack.com/docs/api/overview).
For further details please refer to the [`react-table` v7 documentation](https://github.com/TanStack/table/blob/v7/docs/src/pages/docs/api/overview.md).

## How to select rows containing active elements?

Expand Down Expand Up @@ -88,7 +88,7 @@ React.useEffect(() => {
/>
```

For more details on this behavior you can double check the [react-table docs](https://react-table-v7.tanstack.com/docs/faq#how-do-i-stop-my-table-state-from-automatically-resetting-when-my-data-changes).
For more details on this behavior you can double check the [react-table v7 docs](https://github.com/TanStack/table/blob/v7/docs/src/pages/docs/faq.md#how-do-i-stop-my-table-state-from-automatically-resetting-when-my-data-changes).

## How to scroll to a specific row/offset?

Expand Down Expand Up @@ -117,7 +117,7 @@ If you wish to implement your own data manipulation outside the table you can us
/>
```

For more information please take a look at the [React Table v7 docs](https://react-table-v7.tanstack.com/docs/api/overview).
For more information please take a look at the [React Table v7 docs](https://github.com/TanStack/table/blob/v7/docs/src/pages/docs/api/overview.md).

## How to distinguish between `onRowClick` and `onRowSelect` on selection-cell click?

Expand All @@ -138,7 +138,7 @@ const onRowSelect = (e) => {

## How to hide columns?

[React Table v7](https://react-table-v7.tanstack.com/docs/api/useTable) exposes an API on the table instance to hide columns. You can leverage it for example by attaching a React Ref to the `tableInstance` prop.
[React Table v7](https://github.com/TanStack/table/blob/v7/docs/src/pages/docs/api/useTable.md) exposes an API on the table instance to hide columns. You can leverage it for example by attaching a React Ref to the `tableInstance` prop.
Please note that the internal react-table is resetting its hidden state after hiding the column, which is most probably a bug. To prevent this you can set the `autoResetHiddenColumns` table option to `false`. (See [here](https://sap.github.io/ui5-webcomponents-react/?path=/docs/data-display-analyticaltable--default-story#how-to-stop-the-table-state-from-automatically-resetting-when-the-data-changes))

```jsx
Expand Down
8 changes: 4 additions & 4 deletions packages/main/src/components/AnalyticalTable/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -253,7 +253,7 @@ export interface AnalyticalTableColumnDefinition {
*/
enableMultiSort?: boolean;

// all other custom properties of [React Table](https://react-table-v7.tanstack.com/) column options
// all other custom properties of [React Table v7](https://github.com/TanStack/table/blob/v7/docs/src/pages/docs/api/overview.md) column options
[key: string]: any;
}

Expand Down Expand Up @@ -448,11 +448,11 @@ export interface AnalyticalTablePropTypes extends Omit<CommonProps, 'title'> {
/**
* Defines the value that should be filtered on across all rows.
*
* __Note:__ This prop is not supported for tree-tables. You can enable it by creating your own global-filter function. You can find out more about this in the [react-table v7 documentation](https://react-table-v7.tanstack.com/docs/api/useGlobalFilter).
* __Note:__ This prop is not supported for tree-tables. You can enable it by creating your own global-filter function. You can find out more about this in the [react-table v7 documentation](https://github.com/TanStack/table/blob/v7/docs/src/pages/docs/api/useGlobalFilter.md).
*/
globalFilterValue?: string;
/**
* Additional options which will be passed to [react-table´s useTable hook](https://react-table-v7.tanstack.com/docs/api/useTable#table-options)
* Additional options which will be passed to [v7 react-table´s useTable hook](https://github.com/TanStack/table/blob/v7/docs/src/pages/docs/api/useTable.md#table-options)
*/
reactTableOptions?: Record<string, unknown>;
/**
Expand Down Expand Up @@ -564,7 +564,7 @@ export interface AnalyticalTablePropTypes extends Omit<CommonProps, 'title'> {

/**
* Exposes the internal table instance.
* This object will contain all [instance properties](https://react-table-v7.tanstack.com/docs/api/useTable#instance-properties)
* This object will contain all [instance properties (react-table v7)](https://github.com/TanStack/table/blob/v7/docs/src/pages/docs/api/useTable.md#instance-properties)
* of the `useTable` hook and all instance properties from `useColumnOrder`, `useExpanded`, `useFilters`,
* `useGlobalFilter`, `useGroupBy`,`useResizeColumns`, `useRowSelect` and `useSortBy` plugin hooks.
*
Expand Down