Skip to content

Commit

Permalink
chore(html): add grid with column-menu template
Browse files Browse the repository at this point in the history
  • Loading branch information
epetrow committed Jan 29, 2024
1 parent a60b0ef commit 751a9be
Show file tree
Hide file tree
Showing 2 changed files with 70 additions and 0 deletions.
1 change: 1 addition & 0 deletions packages/html/src/grid/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,3 +11,4 @@ export * from './grid-footer-table.spec';
export * from './grid-pager.spec';
export * from './grid-toolbar.spec';
export * from './templates/grid-normal';
export * from './templates/grid-with-column-menu';
69 changes: 69 additions & 0 deletions packages/html/src/grid/templates/grid-with-column-menu.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
import { Grid, GridHeader, GridHeaderTable, GridHeaderCell, GridContainer, GridContent, GridTable, GridPager } from '../../grid';
import { TableThead, TableTbody, TableRow, TableTd } from '../../table';

export const GridWithColumnMenu = (props) => (
<Grid _renderAriaRoot
pager={( <GridPager refresh={false} /> )}
children={(
<>
<GridHeader>
<div className="k-grid-header-wrap">
<GridHeaderTable>
<colgroup>
<col style={{ width: "100px" }} />
<col style={{ width: "100px" }} />
<col style={{ width: "150px" }} />
</colgroup>
<TableThead>
<TableRow>
<GridHeaderCell rowspan={1} colspan={1} menu="column" columnTitle="ID" className="k-filterable"></GridHeaderCell>
<GridHeaderCell rowspan={1} colspan={1} menu="column" columnTitle="Name" className="k-filterable"></GridHeaderCell>
<GridHeaderCell rowspan={1} colspan={1} menu="column" columnTitle="Category" className="k-filterable"></GridHeaderCell>
</TableRow>
</TableThead>
</GridHeaderTable>
</div>
</GridHeader>
<GridContainer>
<GridContent className="k-virtual-content">
<GridTable>
<colgroup>
<col style={{ width: "100px" }} />
<col style={{ width: "100px" }} />
<col style={{ width: "150px" }} />
</colgroup>
<TableTbody>
<TableRow>
<TableTd>1</TableTd>
<TableTd>Chai</TableTd>
<TableTd>Beverages</TableTd>
</TableRow>
<TableRow className="k-alt" alt>
<TableTd>2</TableTd>
<TableTd>Chang</TableTd>
<TableTd>Beverages</TableTd>
</TableRow>
<TableRow>
<TableTd>3</TableTd>
<TableTd>Aniseed Syrup</TableTd>
<TableTd>Condiments</TableTd>
</TableRow>
<TableRow className="k-alt" alt>
<TableTd>4</TableTd>
<TableTd>Chef Anton&apos;s Cajun Seasoning</TableTd>
<TableTd>Condiments</TableTd>
</TableRow>
<TableRow>
<TableTd>5</TableTd>
<TableTd>Grandma&apos;s Boysenberry Spread</TableTd>
<TableTd>Condiments</TableTd>
</TableRow>
</TableTbody>
</GridTable>
</GridContent>
</GridContainer>
</>
)}
{...props}>
</Grid>
);

0 comments on commit 751a9be

Please sign in to comment.