C# tutorials
24. Sortable HTML table

Note: While reading this page, bear in mind that I'm no computer expert and that the text below may be partly inaccurate. If you find errors or have proposals for improvements, please send me a message and help make this a better page for the benefit of future visitors. To the left, there are links to more C# tutorials.


To complete this tutorial, follow these instructions:

1. Open Visual C# 2010 Express.

2. Click on New Project in the File menu.

3. Choose Windows Forms Application if that option isn't already chosen, change the name if you like and click on OK.

4. Resize Form1 to about twice the width and twice the height.

5. Point at Toolbox in the left margin and click on the Auto Hide icon at the top of the window (to keep the window to stay open and easier to work with).

6. Drag four Buttons and a WebBrowser to Form 1. Resize the WebBrowser to about twice the width.

7. Double-click on button1 and type or paste this code where the caret is:

try
{
  sortOrder = string.Empty;
  StringBuilder sb = new StringBuilder();
  for (int i = 0; i < name.Length; i++)
  {
    sb.Append("<tr><td>" + name[i] + "</td><td>" + occupation[i] + "</td><td>" + born[i] + "</td></tr>");
  }
  webBrowser1.DocumentText = html(sb.ToString());
  return;
}
catch (Exception excMsg)
{
  MessageBox.Show(excMsg.Message.ToString(), "Error");
}

8. Double-click on button2 and type or paste this code where the caret is:

try
{
  Dictionary<int, string> dic = new Dictionary<int, string>();
  StringBuilder sb = new StringBuilder();
  for (int i = 0; i < name.Length; i++)
  {
    dic.Add(i, name[i]);
  }
  if (sortOrder != "name")
  {
    sortOrder = "name";
    var sort = (from entry in dic
                orderby entry.Value ascending
                select entry);
    foreach (KeyValuePair<int, string> kvp in sort)
    {
      sb.Append("<tr><td>" + name[kvp.Key] + "</td><td>" + occupation[kvp.Key] + "</td><td>" + born[kvp.Key] + "</td></tr>");
    }
  }
  else if (sortOrder == "name")
  {
    sortOrder = string.Empty;
    var sort = (from entry in dic
                orderby entry.Value descending
                select entry);
    foreach (KeyValuePair<int, string> kvp in sort)
    {
      sb.Append("<tr><td>" + name[kvp.Key] + "</td><td>" + occupation[kvp.Key] + "</td><td>" + born[kvp.Key] + "</td></tr>");
    }
  }
  webBrowser1.DocumentText = html(sb.ToString());
  return;
}
catch (Exception excMsg)
{
  MessageBox.Show(excMsg.Message.ToString(), "Error");
}

9. Double-click on button3 and type or paste this code where the caret is:

try
{
  Dictionary<int, string> dic = new Dictionary<int, string>();
  StringBuilder sb = new StringBuilder();
  for (int i = 0; i < name.Length; i++)
  {
    dic.Add(i, occupation[i]);
  }
  if (sortOrder != "occupation")
  {
    sortOrder = "occupation";
    var sort = (from entry in dic
                orderby entry.Value ascending
                select entry);
    foreach (KeyValuePair<int, string> kvp in sort)
    {
      sb.Append("<tr><td>" + name[kvp.Key] + "</td><td>" + occupation[kvp.Key] + "</td><td>" + born[kvp.Key] + "</td></tr>");
    }
  }
  else if (sortOrder == "occupation")
  {
    sortOrder = string.Empty;
    var sort = (from entry in dic
                orderby entry.Value descending
                select entry);
    foreach (KeyValuePair<int, string> kvp in sort)
    {
      sb.Append("<tr><td>" + name[kvp.Key] + "</td><td>" + occupation[kvp.Key] + "</td><td>" + born[kvp.Key] + "</td></tr>");
    }
  }
  webBrowser1.DocumentText = html(sb.ToString());
  return;
}
catch (Exception excMsg)
{
  MessageBox.Show(excMsg.Message.ToString(), "Error");
}

10. Double-click on button4 and type or paste this code where the caret is:

try
{
  Dictionary<int, short> dic = new Dictionary<int, short>();
  StringBuilder sb = new StringBuilder();
  for (int i = 0; i < name.Length; i++)
  {
    dic.Add(i, born[i]);
  }
  if (sortOrder != "born")
  {
    sortOrder = "born";
    var sort = (from entry in dic
                orderby entry.Value ascending
                select entry);
    foreach (KeyValuePair<int, short> kvp in sort)
    {
      sb.Append("<tr><td>" + name[kvp.Key] + "</td><td>" + occupation[kvp.Key] + "</td><td>" + born[kvp.Key] + "</td></tr>");
    }
  }
  else if (sortOrder == "born")
  {
    sortOrder = string.Empty;
    var sort = (from entry in dic
                orderby entry.Value descending
                select entry);
    foreach (KeyValuePair<int, short> kvp in sort)
    {
      sb.Append("<tr><td>" + name[kvp.Key] + "</td><td>" + occupation[kvp.Key] + "</td><td>" + born[kvp.Key] + "</td></tr>");
    }
  }
  webBrowser1.DocumentText = html(sb.ToString());
  return;
}
catch (Exception excMsg)
{
  MessageBox.Show(excMsg.Message.ToString(), "Error");
}

11. Write or paste this code right above the line private void button1_Click(object sender, EventArgs e):

private string sortOrder = string.Empty;
private string[] name = { "Gellar", "Newton", "Muhammad", "Plath", "Bloom" };
private string[] occupation = { "actress", "scientist", "prophet", "poet", "actor" };
private short[] born = { 1977, 1643, 570, 1932, 1977 };
private string html(string sb)
{
  return @"<?xml version=""1.0"" encoding=""utf-8""?>
<!DOCTYPE html PUBLIC "
"-//W3C//DTD XHTML 1.0 Strict//EN"" ""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"">
<html xmlns="
"http://www.w3.org/1999/xhtml"" lang=""en"" xml:lang=""en"">
<head>
<meta http-equiv="
"Content-Type"" content=""text/html; charset=utf-8"" />
<title>Sortable HTML table tutorial</title>
<style type="
"text/css"">
<!--
body { font-family:Verdana; font-size:16px; margin:10px; }
td { border:rgb(0,0,0) 1px solid; padding:5px; vertical-align:top; }
thead { font-weight:bold; }
-->
</style>
</head>
<body>
<table>
<thead>
<tr><td>Name</td><td>Occupation</td><td>Born</td></tr>
</thead>
<tbody>
"
+ sb + @"</tbody>
</table>
</body>
</html>"
;
}

12. Press F5 to start debugging the program.

13. Click on button1. A table looking like this should appear:

NameOccupationBorn
Gellaractress1977
Newtonscientist1643
Muhammadprophet570
Plathpoet1932
Bloomactor1977

13. Click on button2. A table looking like this should appear:

NameOccupationBorn
Bloomactor1977
Gellaractress1977
Muhammadprophet570
Newtonscientist1643
Plathpoet1932

14. Click on button2 again. A table looking like this should appear:

NameOccupationBorn
Plathpoet1932
Newtonscientist1643
Muhammadprophet570
Gellaractress1977
Bloomactor1977

15. Click on button3. A table looking like this should appear:

NameOccupationBorn
Bloomactor1977
Gellaractress1977
Plathpoet1932
Muhammadprophet570
Newtonscientist1643

16. Click on button3 again. A table looking like this should appear:

NameOccupationBorn
Newtonscientist1643
Muhammadprophet570
Plathpoet1932
Gellaractress1977
Bloomactor1977

17. Click on button4. A table looking like this should appear:

NameOccupationBorn
Muhammadprophet570
Newtonscientist1643
Plathpoet1932
Gellaractress1977
Bloomactor1977

18. Click on button4 again. A table looking like this should appear:

NameOccupationBorn
Gellaractress1977
Bloomactor1977
Plathpoet1932
Newtonscientist1643
Muhammadprophet570

General comment

The comments to this tutorial assume you already know HTML and CSS. If you don't, I propose you visit HTML Dog or some other website teaching the basics of HTML and CSS.


Would you like to comment on this page or some other page? Use the contact form. Write the title of the page you want to comment on and your comment in the field Message.