<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>Demo</title>
    <!-- In production, use a specific UI5 version -->
    <script id="sap-ui-bootstrap"
      src="https://sdk.openui5.org/resources/sap-ui-core.js"
      data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
      data-sap-ui-theme="sap_fiori_3"
      data-sap-ui-async="true"
      data-sap-ui-compatversion="edge"
      data-sap-ui-excludejquerycompat="true"
      data-sap-ui-resourceroots='{ "demo": "./" }'
      data-sap-ui-xx-waitfortheme="init"
      data-sap-ui-xx-componentpreload="off"
    ></script><!-- xx-componentpreload="off" only for previews to avoid 404 -->
  </head>
  <body id="content" class="sapUiBody">
    <div data-sap-ui-component
      data-id="rootComponentContainer"
      data-name="demo"
      data-height="100%"
      data-settings='{ "id": "rootComponent" }'
    ></div>
  </body>
</html>
sap.ui.define([
  "sap/ui/core/UIComponent",
  "sap/ui/core/ComponentSupport",//https://github.com/SAP/ui5-tooling/issues/381
], function(UIComponent) {
  "use strict";

  return UIComponent.extend("demo.Component", {
    metadata: {
      interfaces: [
        "sap.ui.core.IAsyncContentCreation",
      ],
      manifest: "json",
    },

  });
});
{
  "_version": "1.35.0",
  "start_url": "index.html",
  "sap.app": {
    "id": "demo",
    "type": "application",
    "title": "App Title",
    "description": "Sample Code",
    "applicationVersion": {
      "version": "1.0.0"
    },
    "dataSources": {}
  },
  "sap.ui": {
    "technology": "UI5",
    "deviceTypes": {
      "desktop": true,
      "tablet": true,
      "phone": true
    }
  },
  "sap.ui5": {
    "handleValidation": true,
    "dependencies": {
      "minUI5Version": "1.92.1",
      "libs": {
        "sap.ui.core": {},
        "sap.m": {}
      }
    },
    "contentDensities": {
      "compact": true,
      "cozy": true
    },
    "resources": {
      "css": []
    },
    "models": {
      "": {
        "type": "sap.ui.model.json.JSONModel"
      }
    },
    "rootView": {
      "viewName": "demo.view.App",
      "id": "rootView",
      "type": "XML",
      "height": "100%"
    }
  }
}
<mvc:View
  xmlns:mvc="sap.ui.core.mvc"
  xmlns:f="sap.f"
  xmlns="sap.m"
  xmlns:my="demo.control"
  displayBlock="true"
>
  <App id="rootApp" class="myApp" autoFocus="false">
    <Page title="ColumnListItem With a Progress Bar at the Bottom">
      <Table headerText="Via extended ColumnListItem">
        <columns>
          <Column vAlign="Middle">
            <Text text="Col 1" />
          </Column>
          <Column vAlign="Middle">
            <Text text="Col 2" />
          </Column>
        </columns>
        <my:ColumnListProgressItem>
          <Text text="123213" />
          <Text text="456456" />
          <my:progress>
            <ProgressIndicator displayOnly="true" />
          </my:progress>
        </my:ColumnListProgressItem>
        <my:ColumnListProgressItem>
          <Text text="098089" />
          <Text text="787878" />
          <my:progress>
            <ProgressIndicator displayOnly="true" />
          </my:progress>
        </my:ColumnListProgressItem>
      </Table>
      <Table headerText="Via popin">
        <columns>
          <Column vAlign="Middle">
            <Text text="Col 1" />
          </Column>
          <Column vAlign="Middle">
            <Text text="Col 2" />
          </Column>
          <Column id="progress"
            vAlign="Bottom"
            hAlign="Center"
            popinDisplay="WithoutHeader"
            demandPopin="true"
            minScreenWidth="99999rem"><!-- Basically popin always -->
          </Column>
        </columns>
        <ColumnListItem>
          <Text text="123213" />
          <Text text="456456" />
          <ProgressIndicator displayOnly="true" />
        </ColumnListItem>
        <ColumnListItem>
          <Text text="098089" />
          <Text text="787878" />
          <ProgressIndicator displayOnly="true" />
        </ColumnListItem>
      </Table>
    </Page>
  </App>
</mvc:View>
sap.ui.define([
  "sap/m/ColumnListItem",
  "./ColumnListProgressItemRenderer",
], function (ColumnListItem, ColumnListProgressItemRenderer) {
  "use strict";

  return ColumnListItem.extend("demo.control.ColumnListProgressItem", {
    metadata: {
      aggregations: {
        "progress": {
          type: "sap.m.ProgressIndicator",
          multiple: false,
        },
      },
    },

    renderer: ColumnListProgressItemRenderer,
  });
});
sap.ui.define([
  "sap/m/ColumnListItemRenderer",
], function(ColumnListItemRenderer) {
  "use strict";

  /* MINIMAL SAMPLE */

  const name = "demo.control.ColumnListProgressItemRenderer";
  return ColumnListItemRenderer.extend(name, {
    apiVersion: 2,
    render: function (oRM, oControl) {
      ColumnListItemRenderer.render.apply(this, arguments);
      oRM.openStart("tr", oControl.getId() + "-extrarow")
        .class("sapMListTblSubRow")
        .openEnd()
        .openStart("td", oControl.getId() + "-subcell")
          .class("sapMListTblSubRowCell")
          .attr("colspan", oControl.getTable().getColSpan())
          .openEnd()
          .renderControl(oControl.getAggregation("progress"))
        .close("td")
      .close("tr");
    },

  });
});