Move in SortableTable

frontend/packages/core/src/index.ts

@@ -15,3 +15,4 @@ export { default as HorizontalScrollGrid } from './components/HorizontalScrollGr
 export { default as ProgressCard } from './components/ProgressCard';
 export { default as CircleProgress } from './components/CircleProgress';
 export { default as Progress } from './components/Progress';
+export { default as SortableTable } from './components/SortableTable';

frontend/packages/plugins/home-page/src/components/HomePage/HomePage.tsx

@@ -1,17 +1,35 @@
 import React, { FC } from 'react';
 
-import { EntityLink, InfoCard } from '@backstage/core';
+import { EntityLink, InfoCard, SortableTable } from '@backstage/core';
 import SquadTechHealth from './SquadTechHealth';
 import { Grid, Typography } from '@material-ui/core';
 
 const HomePage: FC<{}> = () => {
+  const data = [
+    { id: 'service-1', system: 'system' },
+    { id: 'service-2', system: 'system' },
+  ];
+
+  /*
+  const columns = [
+    { id: 'idLink', label: 'ID', sortValue: row => row.id },
+    { id: 'systemLink', label: 'SYSTEM', sortValue: row => row.system },
+  ];
+
+  */
+  const columns = [
+    { id: 'idLink', label: 'ID' },
+    { id: 'systemLink', label: 'SYSTEM' },
+  ];
+
   return (
     <Grid container direction="column" spacing={6}>
       <Grid item>
         <SquadTechHealth />
       </Grid>
       <Grid item>
-        <InfoCard title="Home">
+        <InfoCard title="Stuff you own">
+          <SortableTable data={data} columns={columns} orderBy="id" />
           <Typography variant="body1">Welcome to Backstage!</Typography>
           <div>
             <EntityLink kind="service" id="backstage-backend">