This is Highly Customizable Angular JS Front End Component, it is all in one spreadsheet-like table tag that has an editable table structure with fast key-in data entry options.
Users can enter data on the web and save the data through a data service just by hitting the TAB key. Users can customize columns, remove them, add drop downs and track their project statuses if you connect the component to DB.
I’ve tried to make things as easy as possible for you to use, please follow steps for installation.
Installation instructions
Theme includes Jquery,JqueryUI,Bootstrap,AngularJS and font-awesome css.
<script src="js/jquery-3.3.1.min.js"></script> <script src="js/popper.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/angular.js"></script> <script src="js/ui-bootstrap-tpls-0.12.0.js"></script> <script src="js/angular-resource.js"></script> <script src="js/angular-animate.js"></script> <script src="js/jquery-ui.min.js"></script> <link rel="stylesheet" href="css/spreadsheet.css" /> <link rel="stylesheet" href="css/bootstrap.min.css" /> <!--Date Picker Start--> <script type="text/javascript" src="js/moment.min.js"></script> <!-- Bootstrap Icons and fonts start--> <link href="css/font-awesome.min.css" rel="stylesheet" media="all"> <link href="css/fontawesome-all.min.css" rel="stylesheet" media="all"> <!-- Bootstrap Icons and fonts End--> <!--Date Picker Start--> <script type="text/javascript" src="js/daterangepicker.min.js"></script> <link rel="stylesheet" type="text/css" href="css/daterangepicker.css" /> <!--Date Picker End--> <!-- Custom Directive Include start--> <script src="directive/SpreadsheetService.js"></script> <script src="directive/spreadsheet.js"></script> <!-- Custom Directive Include End-->
AngularJS controller provides data for your table, it includes dataRowSource,dataColumnSource
<!-- Angular Controller for data include Start--> <script src="js/controller.js"></script> <!-- Angular Controller for data include End-->
add spreadsheet-table to your html page.
<spreadsheet-table table-id="myMainGridTable" table-style="light" rowdatasource="rowDataJSON" columndatasource="columnHeadersJSON" columnheadersnametype="columnHeadersNameType" > </spreadsheet-table>