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.

Features

• Allow Add/Edit/Delete/Update Any table
• Change table structure
• Add/Remove Rows and columns
• Add columns of text,number and date type
• Feel free to customize data
• Fast access to combox box values and date columns
• Fast key search and auto suggest for user data
• Pagination,searching and Sorting features
• Highly Customizable AngularJS FrontEnd Component

1. A HTML editor.
2. Basic Web Server  for hosting static pages and JSON files

I've tried to make things as easy as possible for you to use, please follow steps for installation.

• Locate the ‘Main’ folder
• Upload this folder to your live web server
• Navigate to the folder in your web browser (eg. http://somedomain.com/main/ or http://localhost/main)
• Enjoy using Customizable Table Demo

Installation instructions

1.Import All Standard CSS and javascript files.

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-->

2.Import AngularJS Controller .

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-->

3.Add Spreadsheet Tag

add spreadsheet-table to your html page.

  <spreadsheet-table table-id="myMainGridTable" table-style="light" rowdatasource="rowDataJSON" columndatasource="columnHeadersJSON"
          columnheadersnametype="columnHeadersNameType" >
          </spreadsheet-table>  

You are done!