[Lens] Update DatatableComponent header and footer styles and make ba…

…ckground transparent (elastic#199813)

## Summary

Closes elastic#193910

#### Description

- Update Lens' current table visualization `EuiDataGrid` prop for
`gridStyle` to use the shade value for `header` and `footer`
- Make table's background transparent

#### Screenshots

![Screenshot 2024-11-12 at 16 24
27](https://github.com/user-attachments/assets/b42d4daa-37ae-456d-9bd8-c6b6930b187b)

![Screenshot 2024-11-12 at 16 25
44](https://github.com/user-attachments/assets/6c69ea05-d915-4200-9c5c-6e19c9c32019)

![Screenshot 2024-11-13 at 11 02
47](https://github.com/user-attachments/assets/f530b74e-a238-456b-bbbc-e3d8607ec102)

### Checklist

- [ ] Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),
[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))
- [ ] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [ ] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)

### For maintainers

- [ ] This was checked for breaking API changes and was [labeled
appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#_add_your_labels)
- [ ] This will appear in the **Release Notes** and follow the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

x-pack/plugins/lens/public/visualizations/datatable/components/table_basic.scss

@@ -1,5 +1,10 @@
 .lnsDataTableContainer {
   height: 100%;
+
+  // EUI issue to make background transparent https://github.com/elastic/eui/issues/8136
+  .euiDataGrid__content {
+    background: transparent;
+  }
 }
 
 .lnsTableCell--multiline {

x-pack/plugins/lens/public/visualizations/datatable/components/table_basic.tsx

@@ -70,7 +70,8 @@ export const DataContext = React.createContext<DataContextType>({});
 
 const gridStyle: EuiDataGridStyle = {
   border: 'horizontal',
-  header: 'underline',
+  header: 'shade',
+  footer: 'shade',
 };
 
 export const DEFAULT_PAGE_SIZE = 10;