JSFiddle - React, Tailwind, and code Playground

by Mohammed Abadi

HTML

This is the xsl document:
<xsl:stylesheet version="1.0"
      xmlns:xsl='http://www.w3.org/1999/XSL/Transform'
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:xsl="http://www.w3.org/1999/XSL/Transform-alternate" >

<xsl:namespace-alias stylesheet-prefix="xsl" result-prefix="xsl"/>
  <xsl:variable name="comma" select="','"/>
  <xsl:variable name="newline" select="']_|_['" />
  <xsl:template match="/">

    <!-- Creating the generated stylesheet tag -->
    <xsl:stylesheet> <!-- [G1] -->
      <xsl:attribute name="version">1.0</xsl:attribute>
      <!-- GENERATES
              <xsl:stylesheet version="1.0"
              xmlns:xsl="http://www.w3.org/1999/XSL/Transform"">
      -->

      <xsl:output method="html" encoding="UTF-8" omit-xml-declaration="yes" />

      <!-- Creating the generated template tag -->
      <xsl:template match="/"> <!-- [G2] -->
<pre><pre>
          <!-- Insert header row-->
          <xsl:for-each select="meta_data//columns//name">
            <xsl:value-of select="."/>
            <xsl:if test="../following-sibling::* | ../parent::group">
              <xsl:value-of select="$comma" />
            </xsl:if>
          </xsl:for-each>

          <xsl:for-each select="meta_data//exportonlycolumn/name">
            <xsl:value-of select="$comma" />
            <xsl:value-of select="."/>
            <xsl:if test="../following-sibling::*">
              <xsl:text></xsl:text>
            </xsl:if>
          </xsl:for-each>

          
          <xsl:value-of select="$newline" />
		  
		  
          <!-- Creating a loop for each record in the data -->
          <xsl:apply-templates> <!-- [G4] -->
            <xsl:attribute name="select">
              <xsl:value-of select="meta_data/xml_collection_xpath"/>/<xsl:value-of select="meta_data/xml_element_xpath"/>
            </xsl:attribute>

            <!-- GENERATES  <xsl:apply-templates select="XXXXXXX">   -->

            <!-- [G6]  -->

            <xsl:sort>
              <xsl:attribute...

CSS

The resulting will be :
<xsl:stylesheet
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns="http://www.w3.org/1999/xhtml" version="1.0">
    <xsl:output method="html" encoding="UTF-8" omit-xml-declaration="yes" disable-output-escaping="yes"/>
    
    <xsl:template match="/">
        <pre>
            <pre>Account #,Notes,Name,Carrier,Country,Type,Master,Last Invoice,Invoice Date,Account ID]_|_[
                <xsl:apply-templates select="DATA/CALL/RESULT/QueryObject/QueryResults/Collection/Item/DataContainer">
                    <xsl:sort select="DONOTSORT" data-type="number" order="ascending"/>
                </xsl:apply-templates>
            </pre>
        </pre>
    </xsl:template>
    <xsl:template match="Item/DataContainer">
        <xsl:text/>
        <xsl:text>;:</xsl:text>
        <xsl:text>STRING</xsl:text>
        <xsl:text>;:</xsl:text>
        <xsl:value-of select="ACCOUNTNUMBER/@tableDisplay"/>
        <xsl:text>;:</xsl:text>
        <xsl:value-of select="ACCOUNTNUMBER"/>]_[
        <xsl:text/>
        <xsl:text>;:</xsl:text>
        <xsl:text>ICON</xsl:text>
        <xsl:text>;:</xsl:text>
        <xsl:value-of select="HASNOTES/@tableDisplay"/>
        <xsl:text>;:</xsl:text>
        <xsl:value-of select="HASNOTES"/>]_[
        <xsl:text/>
        <xsl:text>;:</xsl:text>
        <xsl:text>STRING</xsl:text>
        <xsl:text>;:</xsl:text>
        <xsl:value-of select="NAME/@tableDisplay"/>
        <xsl:text>;:</xsl:text>
        <xsl:value-of select="NAME"/>]_[
        <xsl:text/>
        <xsl:text>;:</xsl:text>
        <xsl:text>STRING</xsl:text>
        <xsl:text>;:</xsl:text>
        <xsl:value-of select="CARRIERNAME/@tableDisplay" />
        <xsl:text>;:</xsl:text>
        <xsl:value-of select="CARRIERNAME" />]_[
        <xsl:text/>
        <xsl:text>;:</xsl:text>
        <xsl:text>STRING</xsl:text>
        <xsl:text>;:</xsl:text>
        <xsl:value-of select="COUNTRYNAME/@tableDisplay"/>
        <xsl:text>;:</xsl:text>
       ...

JavaScript

Thes xsl document will be applied on the xml data of a table:
<xml>
<meta_data>
            <active>true</active>
            <load>true</load>

            <showbuttons>true</showbuttons>
            <showresults>true</showresults>
            <showsummary>false</showsummary>
            <showrefreshbutton>true</showrefreshbutton>

            <xml_collection_xpath>DATA/CALL/RESULT/QueryObject/QueryResults/Collection</xml_collection_xpath>
            <xml_element_xpath>Item/DataContainer</xml_element_xpath>

            <bindto>DONOTSORT</bindto>
            <sortby_type>number</sortby_type>
            <direction>ascending</direction>
            <elementid>ACCOUNTID</elementid>

            <columns>

              <column>
                <cell>
                  <display_type>STRING</display_type>
                  <display_color>DEFAULT</display_color>
                </cell>
                <name>Account #</name>
                <bindto>ACCOUNTNUMBER</bindto>
                <sortby_type>text</sortby_type>
                <width>90</width>
              </column>

              <column>
                <cell>
                  <link_action>popNotes</link_action>
                  <display_type>ICON</display_type>
                  <display_align>center</display_align>
                </cell>
                <name>Notes</name>
                <bindto>HASNOTES</bindto>
                <sortby_type>text</sortby_type>
                <width>43</width>
              </column>

              <column>
                <cell>
                  <display_type>STRING</display_type>
                  <display_color>DEFAULT</display_color>
                </cell>
                <name>Name</name>
                <bindto>NAME</bindto>
                <sortby_type>text</sortby_type>
                <width>90</width>
              </column>

              <column>
                <cell>
                  <display_type>STRING</display_type>
                 ...