I want the visitor of a page to be able to filter from a list by one of it's document type. How can I achieve this?

I'm displaying them with a table:

  <table>
                    <thead>
                        <tr>
                            <th style="width: 15%;" data-sort-initial="true">
                                Kommun
                            </th>
                            <th style="width: 20%;">
                                Skola
                            </th>
                            <th style="width: 15%;">
                                Datum
                            </th>
                            <th style="width: 15%;" data-sort-ignore="true">
                                Tid
                            </th>
                            <th style="width: 20%;" data-sort-ignore="true">
                                Adress
                            </th>
                            <th style="width: 15%;" data-sort-ignore="true">
                                Övrigt
                            </th>
                        </tr>
                    </thead>

                    <tbody>

                        @foreach (var school in schools)
                        {
                            var times = school.Children.Where("date > DateTime.Now.Date").OrderBy("date");

                            foreach (var time in times)
                            {
                        <tr>
                            <td data-title="Kommun">
                                @if (!string.IsNullOrEmpty(school.kommun))
                                        {
                                        @school.kommun
                                        }
                                        else
                                        {
                                        <text>&nbsp;</text>
                                        }
                            </td>
                            <td data-title="Skola">
                                @if (!string.IsNullOrEmpty(school.Name))
                                        {
                                        @school.Name
                                        }
                                        else
                                        {
                                        <text>&nbsp;</text>
                                        }
                            </td>
                            <td data-title="Datum">
                                @if (time.date != null)
                                        {
                                        @time.date.ToString("yyyy-MM-dd")
                                        }
                                        else
                                        {
                                        <text>&nbsp;</text>
                                        }
                            </td>
                            <td data-title="Tid">
                                @if (!string.IsNullOrEmpty(time.time))
                                        {
                                        @time.time
                                        }
                                        else
                                        {
                                        <text>&nbsp;</text>
                                        }
                            </td>
                            <td data-title="Adress">
                                @if (!string.IsNullOrEmpty(school.adress))
                                        {
                                        @school.adress
                                        }
                                        else
                                        {
                                        <text>&nbsp;</text>
                                        }
                            </td>
                            <td data-title="Övrigt">
                                @if (!string.IsNullOrEmpty(school.oevrigt.ToString()))
                                {
                                    @school.oevrigt
                                }
                                else
                                {
                                    <text>&nbsp;</text>
                                }
                            </td>

                        </tr>
                            }
                        }

                    </tbody>
                </table>

And I'm using document property for each column

This is how it looks so far:

Where would I go from here?