diff --git a/ui/src/overridableMapping.js b/ui/src/overridableMapping.js
index 55e8fecfb..86700cd2b 100644
--- a/ui/src/overridableMapping.js
+++ b/ui/src/overridableMapping.js
@@ -37,7 +37,7 @@ import { OpeningHoursDetails } from "./overridden/frontsite/OpeningHours/Opening
 import { PaymentInformationGrid } from "./overridden/backoffice/PaymentInformation/PaymentInformation";
 import { OrderDetailsLine } from "./overridden/backoffice/Acquisition/OrderDetails";
 import { ItemCirculationShelf } from "./overridden/backoffice/Items/ItemCirculationShelf";
-import { DocumentItems } from "./overridden/backoffice/Document/DocumentDetails/DocumentItems";
+import { DocumentItemsLayout } from "./overridden/backoffice/Document/DocumentDetails/DocumentItems";
 
 export const overriddenCmps = {
   "Backoffice.PatronDetails.Metadata": PatronMetadata,
@@ -72,5 +72,5 @@ export const overriddenCmps = {
   "Acquisition.OrderLine": OrderDetailsLine,
   "DocumentCirculation.Extras": DocumentCirculationExtras,
   "ItemCirculation.backoffice.shelf": ItemCirculationShelf,
-  "DocumentDetails.DocumentItems": DocumentItems,
+  "DocumentDetails.DocumentItems": DocumentItemsLayout,
 };
diff --git a/ui/src/overridden/backoffice/Document/DocumentDetails/DocumentItems.js b/ui/src/overridden/backoffice/Document/DocumentDetails/DocumentItems.js
index 5e082b00c..407a5ca79 100644
--- a/ui/src/overridden/backoffice/Document/DocumentDetails/DocumentItems.js
+++ b/ui/src/overridden/backoffice/Document/DocumentDetails/DocumentItems.js
@@ -1,127 +1,76 @@
-import React, { Component } from "react";
-import PropTypes from "prop-types";
+import React from "react";
 import { Link } from "react-router-dom";
 import {
   BackOfficeRoutes,
-  itemApi,
-  ResultsTable,
-  Loader,
-  Error,
-  SeeAllButton,
+  DocumentItems,
 } from "@inveniosoftware/react-invenio-app-ils";
 import _get from "lodash/get";
 import _isEmpty from "lodash/isEmpty";
+import { parametrize } from "react-overridable";
 
-export class DocumentItems extends Component {
-  componentDidMount() {
-    const { fetchDocumentItems, documentDetails } = this.props;
-    fetchDocumentItems(documentDetails.pid);
-  }
-
-  seeAllButton = () => {
-    const { documentDetails } = this.props;
-
-    const path = BackOfficeRoutes.itemsListWithQuery(
-      itemApi.query().withDocPid(documentDetails.pid).qs()
-    );
-    return <SeeAllButton to={path} />;
-  };
-
-  viewDetails = ({ row }) => {
-    return (
-      <Link
-        to={BackOfficeRoutes.itemDetailsFor(row.metadata.pid)}
-        data-test={row.metadata.pid}
-      >
-        {row.metadata.barcode}
-      </Link>
-    );
-  };
-
-  locationFormatter = ({ row }) => {
-    return `${row.metadata.internal_location.name} (${row.metadata.internal_location.location.name})`;
-  };
-
-  callNumberFormatter = ({ row }) => {
-    if (!_isEmpty(row.metadata.identifiers)) {
-      return row.metadata.identifiers.find(
-        (identifier) => identifier.scheme === "CALL_NUMBER"
-      ).value;
-    }
-    return "-";
-  };
+const viewDetails = ({ row }) => {
+  return (
+    <Link
+      to={BackOfficeRoutes.itemDetailsFor(row.metadata.pid)}
+      data-test={row.metadata.pid}
+    >
+      {row.metadata.barcode}
+    </Link>
+  );
+};
 
-  renderTable(data) {
-    const { showMaxItems } = this.props;
-    const columns = [
-      {
-        title: "Barcode",
-        field: "metadata.barcode",
-        formatter: this.viewDetails,
-      },
-      { title: "Status", field: "metadata.status" },
-      { title: "Medium", field: "metadata.medium" },
-      {
-        title: "Location",
-        field: "metadata.internal_location.name",
-        formatter: this.locationFormatter,
-      },
-      {
-        title: "Call number",
-        field: "metadata.identifiers",
-        formatter: this.callNumberFormatter,
-      },
-      { title: "Restrictions", field: "metadata.circulation_restriction" },
-      {
-        title: "Loan Status",
-        field: "metadata.circulation.state",
-        formatter: ({ row, col }) => {
-          if (_get(row, col.field) === "ITEM_ON_LOAN") {
-            return (
-              <Link
-                to={BackOfficeRoutes.loanDetailsFor(row.metadata.circulation.loan_pid)}
-              >
-                on loan
-              </Link>
-            );
-          }
-          return _get(row, col.field) || "-";
-        },
-      },
-    ];
-    return (
-      <ResultsTable
-        data={data.hits}
-        columns={columns}
-        totalHitsCount={data.total}
-        name="attached items"
-        seeAllComponent={this.seeAllButton()}
-        showMaxRows={showMaxItems}
-      />
-    );
-  }
+const locationFormatter = ({ row }) => {
+  return `${row.metadata.internal_location.name} (${row.metadata.internal_location.location.name})`;
+};
 
-  render() {
-    const { documentItems, isLoading, error } = this.props;
-    return (
-      <Loader isLoading={isLoading}>
-        <Error error={error}>{this.renderTable(documentItems)}</Error>
-      </Loader>
-    );
+const callNumberFormatter = ({ row }) => {
+  if (!_isEmpty(row.metadata.identifiers)) {
+    return row.metadata.identifiers.find(
+      (identifier) => identifier.scheme === "CALL_NUMBER"
+    ).value;
   }
-}
-
-DocumentItems.propTypes = {
-  documentItems: PropTypes.object.isRequired,
-  documentDetails: PropTypes.object.isRequired,
-  fetchDocumentItems: PropTypes.func.isRequired,
-  showMaxItems: PropTypes.number,
-  isLoading: PropTypes.bool,
-  error: PropTypes.object,
+  return "-";
 };
 
-DocumentItems.defaultProps = {
-  showMaxItems: 5,
-  isLoading: false,
-  error: null,
+const columnFormat = () => {
+  return [
+    {
+      title: "Barcode",
+      field: "metadata.barcode",
+      formatter: viewDetails,
+    },
+    { title: "Status", field: "metadata.status" },
+    { title: "Medium", field: "metadata.medium" },
+    {
+      title: "Location",
+      field: "metadata.internal_location.name",
+      formatter: locationFormatter,
+    },
+    {
+      title: "Call number",
+      field: "metadata.identifiers",
+      formatter: callNumberFormatter,
+    },
+    { title: "Restrictions", field: "metadata.circulation_restriction" },
+    {
+      title: "Loan Status",
+      field: "metadata.circulation.state",
+      formatter: ({ row, col }) => {
+        if (_get(row, col.field) === "ITEM_ON_LOAN") {
+          return (
+            <Link
+              to={BackOfficeRoutes.loanDetailsFor(row.metadata.circulation.loan_pid)}
+            >
+              on loan
+            </Link>
+          );
+        }
+        return _get(row, col.field) || "-";
+      },
+    },
+  ];
 };
+
+export const DocumentItemsLayout = parametrize(DocumentItems, {
+  columnFormat: columnFormat,
+});