@backstage/plugin-techdocs/dist/home/components/Tables/OffsetPaginatedDocsTable.esm.js

The Backstage plugin that renders technical documentation for your components

import { jsx } from 'react/jsx-runtime';
import { useState, useEffect } from 'react';
import { Table } from '@backstage/core-components';
import { useEntityList, EntityTextFilter } from '@backstage/plugin-catalog-react';

function OffsetPaginatedDocsTable(props) {
  const { actions, columns, data, isLoading, options } = props;
  const { updateFilters, setLimit, setOffset, limit, totalItems, offset } = useEntityList();
  const [page, setPage] = useState(
    offset && limit ? Math.floor(offset / limit) : 0
  );
  useEffect(() => {
    if (totalItems && page * limit >= totalItems) {
      setOffset(Math.max(0, totalItems - limit));
    } else {
      setOffset(Math.max(0, page * limit));
    }
  }, [setOffset, page, limit, totalItems]);
  return /* @__PURE__ */ jsx(
    Table,
    {
      columns,
      data,
      options: {
        paginationPosition: "both",
        pageSizeOptions: [5, 10, 20, 50, 100],
        pageSize: limit,
        emptyRowsWhenPaging: false,
        actionsColumnIndex: -1,
        ...options
      },
      actions,
      onSearchChange: (searchText) => updateFilters({
        text: searchText ? new EntityTextFilter(searchText) : void 0
      }),
      page,
      onPageChange: (newPage) => {
        setPage(newPage);
      },
      onRowsPerPageChange: (pageSize) => {
        setLimit(pageSize);
      },
      totalCount: totalItems,
      localization: { pagination: { labelDisplayedRows: "" } },
      isLoading
    }
  );
}

export { OffsetPaginatedDocsTable };
//# sourceMappingURL=OffsetPaginatedDocsTable.esm.js.map