amitse / VxGrid

An standalone native table plugin which uses the best of features provided by AngularJS

Vx Grid (1.0.2)

An standalone native table plugin which uses the best of features provided by AngularJS.

Live Preview

List of supported features (1.0.1)

    a.  Sorting
    b.  Contextual Filtering
    c.  Fixed Header
    d.  Pagination
    e.  Virtualization
    f.  Column Hiding
    g.  Column Width Changing
    h.  Single Row Selection
    i.  Multi Row Selection
    j.  Callbacks
    k.  Inline Row Editing
    l.  Inline Multi Row Editing
    m.  Iniine Row Addition
    n.  Column Wrapping
    o.  Evente Based Actions
    p.  Separate XS View - On widths < 768px, the columns merge to an 'Expand-Collapse' view.

#####VX GRID CONFIG (BOUND TO 'config=') IN DIRECTIVE CALL -----------------------------------------------------------
.enableDropdownsInHeader : SET TO TRUE TO ENABLE DROPDOWNS ON C0LUMNS, ELSE DEFAULT SORT ON HEADER CLICK .selectionEnabled : SET TO TRUE FOR ENABLE ROW SELECTION .multiSelectionEnabled : SET TO TRUE FOR ENABLE MULTI ROW SELECTION - DEPENDENT ON .showGridStats : SET TO TRUE FOR ENABLE ROW SELECTION .showGridOptions : SET TO TRUE FOR ENABLE ROW SELECTION .selectAllOnRenderAll : SET TO TRUE FOR ENABLE SELECT ONLY WHEN ALL ROWS ARE RENDERED .multiSelectionDependentCol : SET TO COLUMN ON WHICH MULTI SELECTION IS DEPENDENT OR SET TO '' OR NULL .onSelectionReturnCol : SET TO COLUMN WHICH POPERTY IS RETURNED ON ROW SELECTION CHANGE .showTable : SET TO TRUE FOR ENABLE SELECT ONLY WHEN ALL ROWS ARE RENDERED .data : .xsRowTitleTemplate : SET TO XS ONLY TEMPLATE - DEFAULTS TO PRIMARY COLUMN HEADER .virtualization : SET TO FALSE TO DISABLE VIRTUALIZATION AND ENABLE PAGINATION .pageLength : SET PAGINATION LENGTH AND DEFUALTS TO 20 .inlineEditingEnabled : SET TO TRUE FOR ENABLING INLINE EDITING OPTION .inlineAddRowEnabled : SET TO TRUE FOR ENABLING ADDING ROW .newRowTemplate : SET TO NEW TEMPLATE

#####VX GRID COLUMN CONFIG (BOUND TO EACH ITEM IN 'vxConfig.columnDefConfigs') IN DIRECTIVE DEFINTION ----------------------------------------------------------------------------------------------------- .dropDownEnabled : SET TO TRUE TO ENABLE COLUMN DROPDOWN .ddSort : SET TO TRUE TO ADD SORT OPTION TO COLUMN DROPDOWN .ddFilters : SET TO TRUE TO ADD FILTERS TO COLUMN DROPDOWN .ddGroup : SET TO TRUE TO ADD GROUP OPTION TO COLUMN DROPDOWN .hidden : SET TO TRUE TO HIDE COLUMN ON DEFAULT .xsHidden : SET TO TRUE TO HIDE COLUMN ON DEFAULT ON XS RESOLUTION .locked : SET TO TRUE TO FIX COLUMN VISIBILITY, COLUMN ORDER, COLUMN WIDTH .primary : SET TO TRUE TO ENABLE THIS COLUMN AS PRIMARY .width : SET WIDTH FOR COLUMN - DEFUALT '200' .renderDefn : SET TO TRUE ENABLE CUSTOM TEMEPLATE .headerDefn : SET CUSTOM HEADER TEMPLATE .cellDefn : SET CUSTOM CELL TEMPLATE - USE 'VX_ROW_POINT' FOR ROW LEVEL PROPERTY & 'VX_DATA_POINT' FOR ROW CELL LEVEL PROPERTY .inlineEditOnColumnEnabled : SET TO TRUE TO ENABLE COLUMN INLINE EDITING .editDefn : SET CUSTOM CELL TEMPLATE - USE 'VX_ROW_POINT' FOR ROW LEVEL PROPERTY & 'VX_DATA_POINT' FOR ROW CELL LEVEL PROPERTY .editDefnTemplate : SET EDIT TEMPLATE TYPE - USE 'VX_ROW_POINT' FOR ROW LEVEL PROPERTY & 'VX_DATA_POINT' FOR ROW CELL LEVEL PROPERTY - SUPPORTED TYPES - 'INPUT', 'TEXTAREA'

#####VX GRID EVENTS ---------------------- 'vxGridRowSelectionChange' EVENT ON ROW SELECTION CHANGE EMITING DATA : {'key': <ROW_VALUE_'onSelectionReturnCol'>, 'value': <BOOLEAN_NEW_SELECTION_STATE>, 'pKey': <PRIMARY_ID_VXGRID> } 'vxGridRowMultiSelectionChange' EVENT ON MULTIROW SELECTION CHANGE EMITING DATA COLLECTION OF : {'key': <ROW_VALUE'onSelectionReturnCol'>, 'value': <BOOLEAN_NEW_SELECTION_STATE>, '_pKey': <PRIMARY_ID_VXGRID> } 'vxPartiallyRendered' EVENT ON VX GRID PARTIAL RENDERED 'vxCompletelyRendered' EVENT ON VX GRID COMPLETE RENDERED 'vxPartiallyRenderedSelectAllDisabled' EVENT ON VX GRID PARTIAL RENDERED AND SELECT ALL DISABLED - ONLY ON .selectAllOnRenderAll SET TO TRUE 'vxCompletelyRenderedSelectAllEnabled' EVENT ON VX GRID COMPLETE RENDERED AND SELECT ALL ENABLED - ONLY ON .selectAllOnRenderAll SET TO TRUE 'vxGridSettingsChanged' EVENT ON VX GRID SETTINGS CHANGED 'vxGridSettingsBuilt' EVENT ON VX GRID COL SETTINGS BUILT 'vxGridChangeRowClass' ON EVENT, ROW CLASS CHANGED AS PER PARAMETER - ACCPETS { ID : VXGRID_ID, DATA : []} , DATA IS COLLECTION OF {'key': 'ROW PRIMARY ID VALUE', 'value', ''} 'vxGridResetRowClass' ON EVENT, RESETS ALL CLASS NAMES ADDED AS PART OF 'vxGridChangeRowClass' 'vxGridDisableRowSelection' ON EVENT, ENABLES/DISABLES ROW SELECTION - ACCEPTS { ID : VXGRID_ID, DATA : []} , DATA IS COLLECTION OF {'key': 'ROW PRIMARY ID VALUE', 'value': } 'vxGridResetDisableRowSelection' ON EVENT, ENABLES ALL ROW FOR SELECTION 'vxGridOpenManageColumns', ON EVENT, OPENS MANAGE COLUMNS MODAL 'vxGridResetVxInstance', ON EVENT, RESETS THE TABLE INSTANCE 'vxGridClearFilters', ON EVENT, CLEARS ALL FILTERS APPLIED 'vxGridSelectAllFiltered', ON EVENT, SELECTS ALL ROWS WITH FILTES APPLIED 'vxGridClearSelection', ON EVENT, CLEARS SELECTION OF ALL ROWS 'vxGridRevealWrapToggle' ON EVENT, TOGGLES WRAP ON COLUMNS

#####VX GRID CONFIG EXTENSIONS ---------------------------- .getVxCounts() RETURNS COUNT - {'vxAllDataLength': , 'vxFilteredDataLength' : , 'vxSelectedDataLength' : .getData() RETURNS CURRENT DATA STATE

#####BUILT USING Angular Vs Repeat Angular Scroll JSON Editor