Update filtering examples and guidance to align with latest recommend…

…ations

aries-site/src/examples/templates/filtering/FilteringTable/FilterServers.js

@@ -91,10 +91,12 @@ export const FilterServers = () => (
     height={{ min: 'medium' }}
   >
     <Data data={serverhealth} properties={properties}>
-      <Toolbar>
-        <DataSearch responsive />
+      <Toolbar gap="medium">
+        <Toolbar>
+          <DataSearch responsive />
+          <DataFilters layer />
+        </Toolbar>
         <DataTableColumns drop tip="Configure columns" options={options} />
-        <DataFilters layer />
         {/* Flex Box added for spacing between Button */}
         <Box flex />
         <Button secondary label="Add server" />

aries-site/src/examples/templates/filtering/FilteringWithSelect.js

@@ -3,6 +3,7 @@ import {
   Box,
   Data,
   DataSearch,
+  DataFilters,
   DataSummary,
   DataView,
   Grid,
@@ -42,9 +43,16 @@ export const FilteringWithSelect = () => (
             { name: 'Paused', properties: { status: ['Paused'] } },
             { name: 'Ready', properties: { status: ['Ready'] } },
           ]}
+          properties={{
+            name: { label: 'Name' },
+            status: { label: 'Status' },
+          }}
         >
-          <Toolbar>
-            <DataSearch responsive />
+          <Toolbar gap="medium">
+            <Toolbar>
+              <DataSearch responsive />
+              <DataFilters layer />
+            </Toolbar>
             <DataView />
           </Toolbar>
           <DataSummary />

aries-site/src/examples/templates/table-customization/components/ColumnSettingsExample.js

@@ -1,22 +1,17 @@
-import { useState } from 'react';
-import { ColumnSettings } from './ColumnSettings';
+import { Data, DataTableColumns } from 'grommet';
 
 const COLUMNS = [
-  { property: 'name', header: 'Name', primary: true },
-  { property: 'status', header: 'Status' },
-  { property: 'role', header: 'Role' },
-  { property: 'location', header: 'Location' },
-  { property: 'hoursAvailable', header: 'Hours available', align: 'end' },
+  { property: 'name', label: 'Name' },
+  { property: 'status', label: 'Status' },
+  { property: 'role', label: 'Role' },
+  { property: 'location', label: 'Location' },
+  { property: 'hoursAvailable', label: 'Hours available' },
 ];
 
-export const ColumnSettingsExample = props => {
-  const [visibleColumns, setVisibleColumns] = useState(COLUMNS);
+export const ColumnSettingsExample = () => {
   return (
-    <ColumnSettings
-      columns={COLUMNS}
-      visibleColumns={visibleColumns}
-      setVisibleColumns={setVisibleColumns}
-      {...props}
-    />
+    <Data data={[]}>
+      <DataTableColumns options={COLUMNS} />
+    </Data>
   );
 };

aries-site/src/examples/templates/table-customization/components/TableCustomizationExample.js

@@ -111,10 +111,12 @@ const Results = () => {
   const properties = buildProperties();
   return (
     <Data data={allData} flex properties={properties}>
-      <Toolbar>
-        <DataSearch responsive />
+      <Toolbar gap="medium">
+        <Toolbar>
+          <DataSearch responsive />
+          <DataFilters layer />
+        </Toolbar>
         <DataTableColumns drop options={options} />
-        <DataFilters layer />
         {/* Flex box for spacing between Data components and Actions button  */}
         <Box flex />
         <Menu label="Actions" kind="toolbar" />

aries-site/src/examples/templates/table-customization/components/index.js

@@ -1,3 +1,2 @@
-export * from './ColumnSettings';
 export * from './ColumnSettingsExample';
-export * from './TableCustomizationExample';
+export * from './TableCustomizationExample';

aries-site/src/pages/templates/datatable-customization.mdx

@@ -3,7 +3,6 @@ import {
   ColumnSettingsExample,
 } from '../../examples';
 import { Example } from '../../layouts';
-import { Box } from 'grommet';
 
 <Example
   code={[
@@ -32,7 +31,7 @@ which columns should appear in the DataTable and another for ordering the column
 
 Since we want to customize the data table itself, we have separate controls for changing
 which columns are shown in the data table and their order. Place a button with a `Manage columns`
-icon between the search and filter controls on the left. These view controls change what items
+icon to the right of the search and filter controls. These view controls change what items
 are shown in the data table or how they are presented rather than changing the items themselves.
 The right aligned `Actions` menu is mainly for actions which modify items in the data table.
 
@@ -48,13 +47,11 @@ the user checks or unchecks a column, as opposed to waiting until the dropdown c
 
 The user can also search for a specific column by typing in the Search input.
 
-<Example
-  code="https://raw.githubusercontent.com/grommet/hpe-design-system/master/aries-site/src/examples/templates/table-customization/components/ColumnSettings.js"
-  horizontalLayout
-  height="none"
-  width={{ min: 'medium' }}
->
-  <ColumnSettingsExample activeIndex={0} />
+<Example 
+  code="https://raw.githubusercontent.com/grommet/hpe-design-system/master/aries-site/src/examples/templates/table-customization/components/ColumnSettingsExample.js"
+
+height="none">
+    <ColumnSettingsExample />
 </Example>
 
 ### Column order
@@ -66,12 +63,3 @@ the move up/move down buttons that are present next to each column name.
 
 Similar to column selection, the reordering of the data table columns should take
 place immediately, as opposed to waiting until the dropdown closes.
-
-<Example
-  code="https://raw.githubusercontent.com/grommet/hpe-design-system/master/aries-site/src/examples/templates/table-customization/components/ColumnSettings.js"
-  horizontalLayout
-  height="none"
-  width={{ min: 'medium' }}
->
-  <ColumnSettingsExample activeIndex={1} />
-</Example>