Skip to content
This repository has been archived by the owner on Dec 8, 2022. It is now read-only.

Add column template and list documentation to grids #369

Merged
merged 3 commits into from
Feb 22, 2017
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions src/app/components/grid/grid-demo.component.html
Original file line number Diff line number Diff line change
@@ -1,18 +1,37 @@
<sky-grid fit="scroll" [data]="items">
<sky-grid-column
id="column1"
field="column1"
heading="Column1"
>
</sky-grid-column>
<sky-grid-column
id="column2"
field="column2"
heading="Column2"

>
</sky-grid-column>
<sky-grid-column
id="column3"
field="column3"
heading="Column3"
>
</sky-grid-column>
<sky-grid-column
id="composite"
field="column3"
heading="Composite column"
[template]="customColumnTemplate"
>
</sky-grid-column>
</sky-grid>

<template let-row="row" let-value="value" #customColumnTemplate>
<div>
Value: {{value}}
</div>
<div>
Column 2: {{row.column2}}
</div>
</template>
8 changes: 7 additions & 1 deletion src/app/components/grid/index.html
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<sky-demo-page title="Grid">
<sky-demo-page-summary>
This grid component displays a SKY UX-themed grid of data. The grid should contain <code>sky-grid-column</code> components which specify column information.
This grid component displays a SKY UX-themed grid of data. The grid should contain <code>sky-grid-column</code> components which specify column information. The <code>sky-grid</code> component can be used as a view of a searchable and pagable list component when used within the <a routerLink="../list-view-grid">sky-list</a> component.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

pagable?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

with paging better?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

or with pagination?

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry for the slow response. I'd go with "a searchable, paginated list component"? ... If that doesn't work, I'd change "pagable" to "pageable." But I think the first suggestion is better.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated with ', paginated list'

</sky-demo-page-summary>

<sky-demo-page-properties
Expand Down Expand Up @@ -39,6 +39,7 @@
Specifies the width of the grid.
Acceptable values: <code>number</code>.
</sky-demo-page-property>

</sky-demo-page-properties>

<sky-demo-page-properties
Expand Down Expand Up @@ -87,6 +88,11 @@
Specifies a search function to apply for the specific column. By default, the column will execute a string compare on the column data.
Acceptable values: <code>(data: any, searchText: string) => boolean</code>
</sky-demo-page-property>
<sky-demo-page-property
propertyName="template"
isOptional="true">
Specifies a template for a column. This can be assigned as a reference to the <code>template</code> attribute, or it can be as a child of the <code>template</code> element inside of the <code>sky-grid-column</code> component. This template has access to the <code>value</code> variable, which contains the value passed to the column, and the <code>row</code> variable, which contains the entire row data.
</sky-demo-page-property>
</sky-demo-page-properties>

<sky-demo-page-example>
Expand Down
2 changes: 1 addition & 1 deletion src/app/components/list-view-grid/index.html
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<sky-demo-page title="List View Grid">
<sky-demo-page-summary>
This list view grid component displays a SKY UX-themed grid for a list of data.
This list view grid component displays a SKY UX-themed grid for a list of data. Internally, the <code>sky-list-view-grid</code> uses the <a routerLink="../grid">sky-grid</a> component, which contains documentation for <code>sky-grid-column</code>.
</sky-demo-page-summary>

<sky-demo-page-properties>
Expand Down