Generate Html Table from the Single Xml Node List Using Xslt

By | December 8, 2016

If you have a list of same xml node and you want to generate the html table with X number of columns, here is the working example. X can be a dynamic or static number based on your need.

Xml data. (Save it as data.xml)

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet  href="xformer.xslt" type="text/xsl" ?>
<names>
	<name>Name 1</name>
	<name>Name 2</name>
	<name>Name 3</name>
	<name>Name 4</name>
	<name>Name 5</name>
	<name>Name 6</name>
	<name>Name 7</name>
	<name>Name 8</name>
	<name>Name 9</name>
	<name>Name 10</name>
	<name>Name 11</name>
	<name>Name 12</name>
	<name>Name 13</name>
	<name>Name 14</name>
	<name>Name 15</name>
</names>

Xslt file (Save it as xformer.xslt in the same folder as data.xml)

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:msxsl="urn:schemas-microsoft-com:xslt" exclude-result-prefixes="msxsl">
	<xsl:output method="html" encoding="utf-8" indent="yes"/>

	<xsl:template match="/names">
		<!-- create table tag. -->
		<!-- NOTE: You may need to change the xmlns namespace as per your need-->
		<table xmlns="http://www.w3.org/1999/xhtml" border="1" cellpadding="5" cellspacing="5">
			
			<!-- call rendertr template with paramter-->
			<xsl:call-template name="rendertr">
				<!-- select all "name" nodes and pass it as a parameter to the xslt template-->
				<xsl:with-param name="nodes" select="name"></xsl:with-param>
				<xsl:with-param name="startindex">1</xsl:with-param>
				<!-- change the column count as per your need -->
				<xsl:with-param name="columncount">5</xsl:with-param>
			</xsl:call-template>
		</table>
	</xsl:template>

	<!-- define template to render TR and TD tag -->
	<xsl:template name="rendertr">
		<xsl:param name="nodes"></xsl:param>
		<xsl:param name="startindex"></xsl:param>
		<xsl:param name="columncount"></xsl:param>
		<xsl:variable name="count" select="count($nodes)" ></xsl:variable>
		<xsl:variable name="endindex" select="$startindex + $columncount - 1"></xsl:variable>
		
		<xsl:if test="$count >= $startindex ">
			<tr xmlns="http://www.w3.org/1999/xhtml">
				<!-- out of the node list, get only the nodes for which we want to generate the td tag. -->
				<xsl:for-each select="$nodes[position() >= $startindex and not (position() > $endindex)]">
					<td>
						<!-- output is the value of the node-->
						<xsl:value-of select="."/>
					</td>
				</xsl:for-each>
				
				<!-- add blank td if needed -->
				<xsl:if test="$endindex > $count">
					<xsl:call-template name="renderblanktd">
						<xsl:with-param name="tdcount" select="$endindex - $count"></xsl:with-param>
					</xsl:call-template>
				</xsl:if>
			</tr>
			<!-- call this template recursively in order to loop through the next set of nodes -->
			<xsl:call-template name="rendertr">
				<xsl:with-param name="nodes" select="$nodes"></xsl:with-param>
				<!-- make the startindex = endindex + 1 to get the next set of nodes -->
				<xsl:with-param name="startindex" select="$endindex+1"></xsl:with-param>
				<!-- keep the column count as it is -->
				<xsl:with-param name="columncount" select="$columncount"></xsl:with-param>
			</xsl:call-template>

		</xsl:if>

	</xsl:template>
	
	
	<!-- this template renders td with nbsp; -->
	<xsl:template name="renderblanktd">
		<xsl:param name="tdcount"></xsl:param>
		<xsl:if test="$tdcount > 0">
			<!-- 160; represents nbsp; -->
			<td xmlns="http://www.w3.org/1999/xhtml">&#160;</td>
			<!-- call this template recursively to get the correct number of blank td -->
			<xsl:call-template name="renderblanktd">
				<xsl:with-param name="tdcount" select="$tdcount - 1"></xsl:with-param>
			</xsl:call-template>
		</xsl:if>
	</xsl:template>
	
</xsl:stylesheet>

Now open data.xml in the browser and you will see the html table

Download Code for Xslt Dynamic Table

Vishal Monpara is a full stack Solution Developer/Architect with 12 years of experience primarily using Microsoft stack. He is currently working in Retail industry and moving 1’s and 0’s from geographically dispersed hard disks to geographically dispersed user’s mind leveraging geographically dispersed team members.

Leave a Reply

Your email address will not be published. Required fields are marked *