[Inspector] Improve the display when there are many columns (elastic#…

…155119)

## Summary

Fixes elastic#112176

Improves the way the inspector table is rendered when there are multiple
columns. I just applied the eui team feedback

**Now**

<img width="1257" alt="image"
src="https://user-images.githubusercontent.com/17003240/232727448-561cd07a-84ec-472f-9968-27631ef9f4f1.png">


**Before**
<img width="875" alt="image"
src="https://user-images.githubusercontent.com/17003240/232727840-24514f38-0a6f-47a3-89ed-adc0bc7ea2f0.png">

src/plugins/data/public/utils/table_inspector_view/components/data_table.tsx

@@ -8,7 +8,7 @@
 
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-
+import { css } from '@emotion/react';
 import {
   EuiButtonIcon,
   EuiFlexGroup,
@@ -192,12 +192,25 @@ export class DataTableFormat extends Component<DataTableFormatProps, DataTableFo
 
     return (
       <EuiInMemoryTable
-        className="insDataTableFormat__table"
+        tableLayout="auto"
+        className="insDataTableFormat__table eui-xScroll"
         data-test-subj="inspectorTable"
         columns={columns}
         items={rows}
         sorting={true}
         pagination={pagination}
+        css={css`
+          // Set a min width on each column - you can use [data-test-subj] to target specific columns
+          .euiTableHeaderCell {
+            min-width: 100px;
+          }
+
+          // Make sure the pagination follows the scroll
+          > div:last-child {
+            position: sticky;
+            left: 0;
+          }
+        `}
       />
     );
   }