Grid with a Header Menu

 <Grid
     scrollable
     emptyText="No records found matching the given criteria."
     records={bind("filtered")}
     columns={[
         {
             header: {
             text: "Name",
             tool: columnMenu(
                 <cx>
                     <TextField
                     mod="menu"
                     placeholder="Filter"
                     value={bind("filter.name")}
                     />
                 </cx>
             )
             },
             field: "fullName",
             visible: bind("visibility.name"),
             sortable: true
         },
         {
             header: {
             text: "Continent",
             tool: stdColumnMenu("filter.continents")
             },
             field: "continent",
             sortable: true,
             visible: bind("visibility.continent")
         },
         {
             header: {
             text: "Browser",
             tool: stdColumnMenu("filter.browsers")
             },
             field: "browser",
             sortable: true,
             visible: bind("visibility.browser")
         },
         {
             header: {
             text: "OS",
             tool: stdColumnMenu("filter.OSes")
             },
             field: "OS",
             sortable: true,
             visible: bind("visibility.OS")
         },
         {
             header: {
             text: "Visits",
             tool: columnMenu(
                 <cx>
                     <FlexRow mod="menu">
                         <TextField
                         value={bind("filter.visits.from")}
                         style="width: 40px"
                         />
                         <Slider
                         from={bind("filter.visits.from")}
                         to={bind("filter.visits.to")}
                         step={1}
                         />
                         <TextField
                         value={bind("filter.visits.to")}
                         style="width: 40px"
                         />
                     </FlexRow>
                 </cx>
             )
             },
             field: "visits",
             sortable: true,
             align: "right",
             visible: bind("visibility.visits")
         }
     ]}
     selection={{ type: KeySelection, bind: "selection" }}
 />

 // header menu components
const visibleColumnsMenu = (
   <cx>
      <Submenu arrow>
         Columns
         <Menu putInto="dropdown">
            <Checkbox value={bind("visibility.continent")} mod="menu">
               Continent
            </Checkbox>
            <Checkbox value={bind("visibility.browser")} mod="menu">
               Browser
            </Checkbox>
            <Checkbox value={bind("visibility.OS")} mod="menu">
               Operating System
            </Checkbox>
            <Checkbox value={bind("visibility.visits")} mod="menu">
               Visits
            </Checkbox>
         </Menu >
      </Submenu >
   </cx >
);

const columnMenu = filter => (
   <cx>
      <Menu horizontal itemPadding="small">
         <Submenu placement="down-left">
            <span style={{ "padding": "4px" }}>
               <Icon name={"menu"} />
            </span>
            <Menu putInto="dropdown">
               {filter}
               <hr />
               {visibleColumnsMenu}
            </Menu>
         </Submenu>
      </Menu>
   </cx>
);

const stdColumnMenu = (valuesPath) => columnMenu(
   <cx>
      <Repeater records={bind(valuesPath)}>
         <Checkbox
            mod="menu"
            value={bind("$record.active")}
            text={bind("$record.name")}
         />
      </Repeater>
   </cx >
);