From cca5bc0ee12f540253fabecb3934fb6ca37c83b5 Mon Sep 17 00:00:00 2001
From: Justin Kambic <justin.kambic@elastic.co>
Date: Thu, 19 Jul 2018 16:42:17 -0400
Subject: [PATCH] Add container for table.

---
 .../public/components/beats_table.tsx         | 40 +++++++++++--------
 1 file changed, 23 insertions(+), 17 deletions(-)

diff --git a/x-pack/plugins/beats_management/public/components/beats_table.tsx b/x-pack/plugins/beats_management/public/components/beats_table.tsx
index 28a8526698489..944a38003ea70 100644
--- a/x-pack/plugins/beats_management/public/components/beats_table.tsx
+++ b/x-pack/plugins/beats_management/public/components/beats_table.tsx
@@ -5,7 +5,6 @@
  */
 
 import {
-  // @ts-ignore
   EuiBadge,
   EuiButton,
   EuiContextMenu,
@@ -17,6 +16,7 @@ import {
   EuiPopover,
 } from '@elastic/eui';
 import React from 'react';
+import styled from 'styled-components';
 import { CMPopulatedBeat } from '../../common/domain_types';
 
 const columns = [
@@ -73,6 +73,10 @@ interface BeatsTableState {
   isBulkPopoverOpen: boolean;
 }
 
+const TableContainer = styled.div`
+  padding: 16px;
+`;
+
 export class BeatsTable extends React.Component<BeatsTableProps, BeatsTableState> {
   constructor(props: BeatsTableProps) {
     super(props);
@@ -168,22 +172,24 @@ export class BeatsTable extends React.Component<BeatsTableProps, BeatsTableState
     };
 
     return (
-      <EuiInMemoryTable
-        columns={columns}
-        items={items.map((beat, index) => {
-          return {
-            ...beat,
-            key: `beat${index}`,
-          };
-        })}
-        itemId="id"
-        isSelectable={true}
-        pagination={pagination}
-        responsive={true}
-        search={search}
-        selection={selectionOptions}
-        sorting={true}
-      />
+      <TableContainer>
+        <EuiInMemoryTable
+          columns={columns}
+          items={items.map((beat, index) => {
+            return {
+              ...beat,
+              key: `beat${index}`,
+            };
+          })}
+          itemId="id"
+          isSelectable={true}
+          pagination={pagination}
+          responsive={true}
+          search={search}
+          selection={selectionOptions}
+          sorting={true}
+        />
+      </TableContainer>
     );
   }