SDC Table

SDC Table is a versatile table module made with Angular Material 2's md-table.

Getting Started

Inputs:

displayObjects: Array<Object>      // Array of Objects to be displayed in table form

headings: Array<{               // Array of Objects with some details on how to display the objects.
    heading: "column heading",
    sortable?: boolean,         // determines if the column should be sorted on column header click
    filterable?: boolean,       // determines if this field should be included in filter searching
    editable?: boolean,         // enable inline editing on individual column
    key: string                 // where in the Objects to look for the value to fill this cell.
}>                              // Include one entry per column desired with the following fields
    
    (If excluded all keys will be displayed with heading title of their key name)

tableProperties: {                                              // object with more information for displaying the table.
        accordian: boolean = false,                             // true enables row expansion
        modal: boolean = false,                                 // true enables popup modal on row click
        pagination: {                                           // pagination settings
            supported: boolean = true,                                      
            itemsPerPage: number = 5,
            pageSizeOptions: Array<number> = [5, 10, 25, 50]
        },
        maxHeight?: number,                                     // max height of the table in pixels
        elevation: boolean = true,                              // true activates class mat-elevation-z8
        inlineEditing: boolean = true,                          // true enable inline editing on all cells
        headingStyles: Array<string>,
        tableStyles: Array<string>,
        headingCss: Array<string>,
        tableCss: Array<string>
    }                                                           //if anything not provided, default values in effect

factory: ComponentFactory;
    build this by using ComponentFactoryResolver to resolve the component of your choice. that component will need to be included in entryComponents of the module it's declared in.

Outputs:

change: {
    data: any,      // whatever was emitted from your component
    index: number   // the index in the array that the component was opened with.
}
    Any changes emitted from your component in the accordian or modal will be emitted from this output as well with in the form of this object

Using Accordian Rows

The component to expand must be included in the entry components of the module so that you can build a factory for it and pass that to sdc-table

In Wrapper Component:

import ( YourComponent ) from '...'
...
private factory: ComponentFactory;
...
constructor(... , private resolver: ComponentFactoryResolver) {
    this.factory = this.resolver.resolve(YourComponent);
}

In Wrapper Template:

<sdc-table ... [factory]="factory" (change)=handleChangeEvent($event)></sdc-table>

In Expanding Component

@Input() data: any;
@Output() change: EventEmitter<any> = new EventEmitter<any>();

Your component will be handed the Object in the array that was clicked on through the input 'data'.

Any changes you would like to pass up to your wrapper component should be output as changes, these will be forwarded up to the wrapped where you can modify the table data as you wish.

Using Inline Editing

changes will be emitted to change in the following object

{
    data: Object    // your updated objects
    index: numebr   // index in the input array that was edited
}

just include set the property inlineEditing to true in the tableProperties input or set editable to true on individual headings.

Authors

• Robert Skakic - Initial work

• Mark Joaquim - Initial work

License

Acknowledgments