JSFiddle - React, Tailwind, and code Playground

by dkamburov

HTML

<script src="https://igniteui.com/js/modernizr.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
    <script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
    <script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
    <script src="https://igniteui.com/js-data/nw-employees"></script>
    <link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"/>
    <link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"/>   
    <script src="https://cdn-na.infragistics.com/igniteui/2021.2/latest/js/i18n/infragistics-de.js"></script>
    <script src="https://cdn-na.infragistics.com/igniteui/2021.2/latest/js/modules/i18n/regional/infragistics.ui.regional-de.js"></script>

    <table id="grid">
    </table>

JavaScript

$(function() {
   $("#grid").igGrid({
     dataSource: northwindEmployees,
     primaryKey: "ID",
     width: "100%",
     height: "600px",
     autoGenerateColumns: false,
     columns: [{
         headerText: "Employee ID",
         key: "ID",
         dataType: "number",
         hidden: true
       },
       {
         headerText: "Name",
         key: "Name",
         dataType: "string"
       },
       {
         headerText: "Title",
         key: "Title",
         dataType: "string"
       },
       {
         headerText: "Phone",
         key: "Phone",
         dataType: "string"
       },
       {
         headerText: "HireDate",
         key: "HireDate",
         dataType: "date"
       }
     ],
     features: [{
       name: "Updating",
       enableAddRow: true,
       enableDeleteRow: false,
       editMode: "row",
       columnSettings: [{
         columnIndex: -1,
         columnKey: 'HireDate',
         required: true,
         editorType: 'datepicker',
         editorOptions: {
           width: '500px',
           displayTimeOffset: 60
         }
       }],
     }],
     regional: 'de',
     language: 'de'
   });
 });