Nevertheless Published Mine

    sdc-table

    0.5.4 • Public • Published

    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

    Keywords

    none

    Install

    npm i sdc-table

    DownloadsWeekly Downloads

    7

    Version

    0.5.4

    License

    MIT

    Last publish

    Collaborators

    • dumbo
    • markjoaquim