npm - @patternfly/react-data-view - Versions diffs - 1.0.0-prerelease.4 → 5.0.0 - Mend

@patternfly/react-data-view 1.0.0-prerelease.4 → 5.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (50) hide show

package/src/DataViewToolbar/__snapshots__/DataViewToolbar.test.tsx.snap ADDED Viewed

@@ -0,0 +1,542 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`DataViewToolbar component should render correctly 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="pf-v5-c-toolbar"
+        data-ouia-component-id="DataViewToolbar"
+        data-ouia-component-type="PF5/Toolbar"
+        data-ouia-safe="true"
+        id="pf-random-id-0"
+      >
+        <div
+          class="pf-v5-c-toolbar__content"
+        >
+          <div
+            class="pf-v5-c-toolbar__content-section"
+          >
+            <div
+              class="pf-v5-c-toolbar__item pf-m-pagination"
+              data-ouia-component-id="DataViewToolbar-pagination"
+            >
+              <div
+                class="pf-v5-c-pagination"
+                data-ouia-component-id="OUIA-Generated-Pagination-top-1"
+                data-ouia-component-type="PF5/Pagination"
+                data-ouia-safe="true"
+                id="options-menu-top-pagination"
+                style="--pf-v5-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
+              >
+                <div
+                  class="pf-v5-c-pagination__total-items"
+                >
+                  <b>
+                    1
+                     -
+                    10
+                  </b>
+                  of
+                  <b>
+                    0
+                  </b>
+                </div>
+                <div>
+                  <button
+                    aria-expanded="false"
+                    aria-haspopup="listbox"
+                    class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+                    id="options-menu-top-toggle"
+                    type="button"
+                  >
+                    <span
+                      class="pf-v5-c-menu-toggle__text"
+                    >
+                      <b>
+                        1
+                         -
+                        10
+                      </b>
+                      of
+                      <b>
+                        0
+                      </b>
+                    </span>
+                    <span
+                      class="pf-v5-c-menu-toggle__controls"
+                    >
+                      <span
+                        class="pf-v5-c-menu-toggle__toggle-icon"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="pf-v5-svg"
+                          fill="currentColor"
+                          height="1em"
+                          role="img"
+                          viewBox="0 0 320 512"
+                          width="1em"
+                        >
+                          <path
+                            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+                          />
+                        </svg>
+                      </span>
+                    </span>
+                  </button>
+                </div>
+                <nav
+                  aria-label="Pagination"
+                  class="pf-v5-c-pagination__nav"
+                >
+                  <div
+                    class="pf-v5-c-pagination__nav-control pf-m-first"
+                  >
+                    <button
+                      aria-disabled="true"
+                      aria-label="Go to first page"
+                      class="pf-v5-c-button pf-m-plain pf-m-disabled"
+                      data-action="first"
+                      data-ouia-component-id="OUIA-Generated-Button-plain-1"
+                      data-ouia-component-type="PF5/Button"
+                      data-ouia-safe="true"
+                      disabled=""
+                      type="button"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="pf-v5-svg"
+                        fill="currentColor"
+                        height="1em"
+                        role="img"
+                        viewBox="0 0 448 512"
+                        width="1em"
+                      >
+                        <path
+                          d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
+                        />
+                      </svg>
+                    </button>
+                  </div>
+                  <div
+                    class="pf-v5-c-pagination__nav-control"
+                  >
+                    <button
+                      aria-disabled="true"
+                      aria-label="Go to previous page"
+                      class="pf-v5-c-button pf-m-plain pf-m-disabled"
+                      data-action="previous"
+                      data-ouia-component-id="OUIA-Generated-Button-plain-2"
+                      data-ouia-component-type="PF5/Button"
+                      data-ouia-safe="true"
+                      disabled=""
+                      type="button"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="pf-v5-svg"
+                        fill="currentColor"
+                        height="1em"
+                        role="img"
+                        viewBox="0 0 256 512"
+                        width="1em"
+                      >
+                        <path
+                          d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
+                        />
+                      </svg>
+                    </button>
+                  </div>
+                  <div
+                    class="pf-v5-c-pagination__nav-page-select"
+                  >
+                    <span
+                      class="pf-v5-c-form-control"
+                    >
+                      <input
+                        aria-invalid="false"
+                        aria-label="Current page"
+                        data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+                        data-ouia-component-type="PF5/TextInput"
+                        data-ouia-safe="true"
+                        max="2"
+                        min="1"
+                        type="number"
+                        value="1"
+                      />
+                    </span>
+                  </div>
+                  <div
+                    class="pf-v5-c-pagination__nav-control"
+                  >
+                    <button
+                      aria-disabled="false"
+                      aria-label="Go to next page"
+                      class="pf-v5-c-button pf-m-plain"
+                      data-action="next"
+                      data-ouia-component-id="OUIA-Generated-Button-plain-3"
+                      data-ouia-component-type="PF5/Button"
+                      data-ouia-safe="true"
+                      type="button"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="pf-v5-svg"
+                        fill="currentColor"
+                        height="1em"
+                        role="img"
+                        viewBox="0 0 256 512"
+                        width="1em"
+                      >
+                        <path
+                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                        />
+                      </svg>
+                    </button>
+                  </div>
+                  <div
+                    class="pf-v5-c-pagination__nav-control pf-m-last"
+                  >
+                    <button
+                      aria-disabled="false"
+                      aria-label="Go to last page"
+                      class="pf-v5-c-button pf-m-plain"
+                      data-action="last"
+                      data-ouia-component-id="OUIA-Generated-Button-plain-4"
+                      data-ouia-component-type="PF5/Button"
+                      data-ouia-safe="true"
+                      type="button"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="pf-v5-svg"
+                        fill="currentColor"
+                        height="1em"
+                        role="img"
+                        viewBox="0 0 448 512"
+                        width="1em"
+                      >
+                        <path
+                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
+                        />
+                      </svg>
+                    </button>
+                  </div>
+                </nav>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="pf-v5-c-toolbar__content pf-m-hidden"
+          hidden=""
+        >
+          <div
+            class="pf-v5-c-toolbar__group"
+          />
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="pf-v5-c-toolbar"
+      data-ouia-component-id="DataViewToolbar"
+      data-ouia-component-type="PF5/Toolbar"
+      data-ouia-safe="true"
+      id="pf-random-id-0"
+    >
+      <div
+        class="pf-v5-c-toolbar__content"
+      >
+        <div
+          class="pf-v5-c-toolbar__content-section"
+        >
+          <div
+            class="pf-v5-c-toolbar__item pf-m-pagination"
+            data-ouia-component-id="DataViewToolbar-pagination"
+          >
+            <div
+              class="pf-v5-c-pagination"
+              data-ouia-component-id="OUIA-Generated-Pagination-top-1"
+              data-ouia-component-type="PF5/Pagination"
+              data-ouia-safe="true"
+              id="options-menu-top-pagination"
+              style="--pf-v5-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
+            >
+              <div
+                class="pf-v5-c-pagination__total-items"
+              >
+                <b>
+                  1
+                   -
+                  10
+                </b>
+                of
+                <b>
+                  0
+                </b>
+              </div>
+              <div>
+                <button
+                  aria-expanded="false"
+                  aria-haspopup="listbox"
+                  class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+                  id="options-menu-top-toggle"
+                  type="button"
+                >
+                  <span
+                    class="pf-v5-c-menu-toggle__text"
+                  >
+                    <b>
+                      1
+                       -
+                      10
+                    </b>
+                    of
+                    <b>
+                      0
+                    </b>
+                  </span>
+                  <span
+                    class="pf-v5-c-menu-toggle__controls"
+                  >
+                    <span
+                      class="pf-v5-c-menu-toggle__toggle-icon"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="pf-v5-svg"
+                        fill="currentColor"
+                        height="1em"
+                        role="img"
+                        viewBox="0 0 320 512"
+                        width="1em"
+                      >
+                        <path
+                          d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+                        />
+                      </svg>
+                    </span>
+                  </span>
+                </button>
+              </div>
+              <nav
+                aria-label="Pagination"
+                class="pf-v5-c-pagination__nav"
+              >
+                <div
+                  class="pf-v5-c-pagination__nav-control pf-m-first"
+                >
+                  <button
+                    aria-disabled="true"
+                    aria-label="Go to first page"
+                    class="pf-v5-c-button pf-m-plain pf-m-disabled"
+                    data-action="first"
+                    data-ouia-component-id="OUIA-Generated-Button-plain-1"
+                    data-ouia-component-type="PF5/Button"
+                    data-ouia-safe="true"
+                    disabled=""
+                    type="button"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="pf-v5-svg"
+                      fill="currentColor"
+                      height="1em"
+                      role="img"
+                      viewBox="0 0 448 512"
+                      width="1em"
+                    >
+                      <path
+                        d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
+                      />
+                    </svg>
+                  </button>
+                </div>
+                <div
+                  class="pf-v5-c-pagination__nav-control"
+                >
+                  <button
+                    aria-disabled="true"
+                    aria-label="Go to previous page"
+                    class="pf-v5-c-button pf-m-plain pf-m-disabled"
+                    data-action="previous"
+                    data-ouia-component-id="OUIA-Generated-Button-plain-2"
+                    data-ouia-component-type="PF5/Button"
+                    data-ouia-safe="true"
+                    disabled=""
+                    type="button"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="pf-v5-svg"
+                      fill="currentColor"
+                      height="1em"
+                      role="img"
+                      viewBox="0 0 256 512"
+                      width="1em"
+                    >
+                      <path
+                        d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
+                      />
+                    </svg>
+                  </button>
+                </div>
+                <div
+                  class="pf-v5-c-pagination__nav-page-select"
+                >
+                  <span
+                    class="pf-v5-c-form-control"
+                  >
+                    <input
+                      aria-invalid="false"
+                      aria-label="Current page"
+                      data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+                      data-ouia-component-type="PF5/TextInput"
+                      data-ouia-safe="true"
+                      max="2"
+                      min="1"
+                      type="number"
+                      value="1"
+                    />
+                  </span>
+                </div>
+                <div
+                  class="pf-v5-c-pagination__nav-control"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-label="Go to next page"
+                    class="pf-v5-c-button pf-m-plain"
+                    data-action="next"
+                    data-ouia-component-id="OUIA-Generated-Button-plain-3"
+                    data-ouia-component-type="PF5/Button"
+                    data-ouia-safe="true"
+                    type="button"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="pf-v5-svg"
+                      fill="currentColor"
+                      height="1em"
+                      role="img"
+                      viewBox="0 0 256 512"
+                      width="1em"
+                    >
+                      <path
+                        d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                      />
+                    </svg>
+                  </button>
+                </div>
+                <div
+                  class="pf-v5-c-pagination__nav-control pf-m-last"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-label="Go to last page"
+                    class="pf-v5-c-button pf-m-plain"
+                    data-action="last"
+                    data-ouia-component-id="OUIA-Generated-Button-plain-4"
+                    data-ouia-component-type="PF5/Button"
+                    data-ouia-safe="true"
+                    type="button"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="pf-v5-svg"
+                      fill="currentColor"
+                      height="1em"
+                      role="img"
+                      viewBox="0 0 448 512"
+                      width="1em"
+                    >
+                      <path
+                        d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
+                      />
+                    </svg>
+                  </button>
+                </div>
+              </nav>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="pf-v5-c-toolbar__content pf-m-hidden"
+        hidden=""
+      >
+        <div
+          class="pf-v5-c-toolbar__group"
+        />
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;

package/src/Hooks/index.ts CHANGED Viewed

	@@ -1 +1,2 @@
1 1	export * from './pagination';
2	+ export * from './selection';

package/src/Hooks/pagination.ts CHANGED Viewed

@@ -1,11 +1,14 @@
 import { useState } from "react";
 export interface UseDataViewPaginationProps {
+  /** Initial page */
   page?: number;
+  /** Items per page */
   perPage: number;
 }
 export interface DataViewPaginationProps extends UseDataViewPaginationProps {
+  /** Current page number */
     page: number;
 }

package/src/Hooks/selection.test.tsx ADDED Viewed

@@ -0,0 +1,52 @@
+import '@testing-library/jest-dom';
+import { renderHook, act } from '@testing-library/react';
+import { useDataViewSelection } from './selection';
+describe('useDataViewSelection', () => {
+  it('should get initial state correctly - no initialSelected', () => {
+    const { result } = renderHook(() => useDataViewSelection({}))
+    expect(result.current).toEqual({
+      selected: [],
+      onSelect: expect.any(Function),
+      isSelected: expect.any(Function),
+    })
+  });
+  it('should get initial state correctly - with initialSelected', () => {
+    const initialSelected = [ { id: 1, name: 'test1' } ];
+    const { result } = renderHook(() => useDataViewSelection({ initialSelected }))
+    expect(result.current).toEqual({
+      selected: initialSelected,
+      onSelect: expect.any(Function),
+      isSelected: expect.any(Function),
+    })
+  });
+  it('should select items correctly - objects', async () => {
+    const initialSelected = [ { id: 1, name: 'test1' } ];
+    const { result } = renderHook(() => useDataViewSelection({ initialSelected }))
+    await act(async () => {
+      result.current.onSelect(true, { id: 2, name: 'test2' });
+    });
+    expect(result.current.selected).toEqual([ ...initialSelected, { id: 2, name: 'test2' } ]);
+  });
+  it('should deselect items correctly - strings', async () => {
+    const initialSelected = [ 'test1', 'test2' ];
+    const { result } = renderHook(() => useDataViewSelection({ initialSelected }))
+    await act(async () => {
+      result.current.onSelect(false, 'test2');
+    });
+    expect(result.current.selected).toEqual([ 'test1' ])
+  });
+  it('should check if item is selected correctly - objects', () => {
+    const initialSelected = [ { id: 1, name: 'test1' }, { id: 2, name: 'test2' } ];
+    const { result } = renderHook(() => useDataViewSelection({ initialSelected, matchOption: (a,b) => a.id === b.id }))
+    expect(result.current.isSelected({ id: 1, name: 'test1' })).toBe(true);
+    expect(result.current.isSelected({ id: 3, name: 'test2' })).toBe(false);
+  });
+});

package/src/Hooks/selection.ts ADDED Viewed

@@ -0,0 +1,32 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useState } from "react";
+export interface UseDataViewSelectionProps {
+  /** Array of initially selected entries */
+  initialSelected?: (any)[];
+  /** Function to compare items when checking if entry is selected */
+  matchOption?: (item: any, another: any) => boolean;
+}
+export const useDataViewSelection = (props: UseDataViewSelectionProps) => {
+  const [ selected, setSelected ] = useState<any[]>(props.initialSelected ?? []);
+  const matchOption = props.matchOption ? props.matchOption : (option, another) => (option === another);
+  const onSelect = (isSelecting: boolean, items?: any[] | any) => {
+    isSelecting ?
+      setSelected(prev => {
+        const newSelectedItems = [ ...prev ];
+        (Array.isArray(items) ? items : [ items ]).forEach(newItem => !prev.some(prevItem => matchOption(prevItem, newItem)) && newSelectedItems.push(newItem));
+        return newSelectedItems;
+      })
+      : setSelected(items ? prev => prev.filter(prevSelected => !(Array.isArray(items) ? items : [ items ]).some(item => matchOption(item, prevSelected))) : []);
+  };
+  const isSelected = (item: any): boolean => props?.matchOption ? Boolean(selected.find(selected => matchOption(selected, item))) : selected.includes(item);
+  return {
+    selected,
+    onSelect,
+    isSelected
+  };
+};

package/patternfly-docs/content/extensions/data-view/examples/DataViewToolbar/DataViewToolbarExample.tsx DELETED Viewed

@@ -1,7 +0,0 @@
-import React from 'react';
-import { Pagination } from '@patternfly/react-core';
-import DataViewToolbar from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
-export const BasicExample: React.FunctionComponent = () => (
-  <DataViewToolbar pagination={<Pagination page={1} perPage={10} />} />
-)

package/patternfly-docs/content/extensions/data-view/examples/Hooks/Hooks.md DELETED Viewed

@@ -1,20 +0,0 @@
----
-# Sidenav top-level section
-# should be the same for all markdown files
-section: extensions
-subsection: Data view
-# Sidenav secondary level section
-# should be the same for all markdown files
-id: Hooks
-# Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
-source: react
-# If you use typescript, the name of the interface to display props for
-# These are found through the sourceProps function provided in patternfly-docs.source.js
-propComponents: []
-sourceLink: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/Hooks/Hooks.md
----
-Data view hooks provide a predefined solution to manage state of the data view. This modular approach allows them to be easily replaced with a custom implementation in case of more specific needs.
-### useDataViewPagination()
-The `useDataViewPagination` hook manages the pagination state of the data view. It retrieves the current `page` and `perPage` values together with functions to set them (`onSetPage`, `onPerPageSelect`). You can easily spread the retrieved values to the PatternFly [pagination](/components/pagination) component and make it live.