Grid with a Header Menu

With the use of Column Header's tool property, it's easy to define custom Header Menus.

Name	Continent	Browser	Visits
Quinten Turcotte	South America	Safari	43
Ayana Dibbert	Asia	Opera	19
Meghan Brown	South America	Opera	31
Mallie Lind	Africa	Chrome	19
Sasha Thompson	Europe	Firefox	52
Toni Ebert	Australia	Edge	10
Maximus Borer	Europe	Safari	60
Madyson Schuppe	Africa	Firefox	82
Yvonne Robel	Antarctica	Internet Explorer	49
Susana Hermann	South America	Opera	69

Controller Index

 <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 >
);

Copied!Cx Fiddle

Documentation

Grid with a Header Menu