Updated first table example to test loading toggle

src-docs/src/views/tables/basic/basic.js

@@ -6,6 +6,7 @@ import {
   EuiBasicTable,
   EuiLink,
   EuiHealth,
+  EuiPopover,
 } from '../../../../../src/components';
 
 /*
@@ -32,7 +33,22 @@ Example country object:
 
 const store = createDataStore();
 
+function CountryColumn({ country }) {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  return (
+    <EuiPopover
+      isOpen={isOpen}
+      closePopover={() => setIsOpen(false)}
+      button={<span onClick={() => setIsOpen(!isOpen)}>{country}</span>}>
+      Country: {country}
+    </EuiPopover>
+  );
+}
+
 export const Table = () => {
+  const [isLoading, setIsLoading] = React.useState(false);
+  window.setIsLoading = setIsLoading;
   const columns = [
     {
       field: 'firstName',
@@ -82,7 +98,7 @@ export const Table = () => {
       name: 'Nationality',
       render: countryCode => {
         const country = store.getCountry(countryCode);
-        return `${country.flag} ${country.name}`;
+        return <CountryColumn country={`${country.flag} ${country.name}`} />;
       },
     },
     {
@@ -120,6 +136,7 @@ export const Table = () => {
 
   return (
     <EuiBasicTable
+      loading={isLoading}
       items={items}
       columns={columns}
       rowProps={getRowProps}