react-md
react-md - Table - Demos

Table

A table is made up by the following components:

  • TableContainer -> <div> (used for responsive tables)
  • Table -> <table>
  • TableHeader -> <thead>
  • TableBody -> <tbody>
  • TableFooter -> <tfooter>
  • TableRow -> <tr>
  • TableCell -> <th> and <td>
  • Caption -> <caption> (you probably won't use this much)
  • TableCheckbox -> <td><input type="checkbox" /></td>

To help reduce some of the repeated code, boilerplate, and apply minimal accessibility, the TableCell will be updated automatically depending on where it was rendered. When a TableCell is rendered in a TableHeader, it'll automatically update to be rendered as a <th> element instead of a <td>. In addition, it'll apply a scope="col" to help screen readers out.

When the TableCell is rendered anywhere else, it'll default to the <td> element unless the header prop is enabled. If the header prop is enabled within the TableBody, it'll apply a scope="row" instead.

In case you didn't know, styling tables is super fun! The tables within react-md have been created in a way that you can hopefully style them as you need with some sensible defaults. That being said, there will be some "weird edge cases" that you will come across if you are more used to a flexbox-based layout approach. The demos below should hopefully point you in the right direction for accomplishing your styling needs.

Default Styles

A Table within react-md will have some defaulted styles to match the material design specifications. The default styles are:

  • the table's width is determined by the content size
  • align each cell in the table to be centered vertically and left horizontally
  • apply border-bottom to each <tr> in the <tbody>
  • apply a hover background-color to each <tr> in the <tbody>
  • disable line wrapping and apply ellipsis for long text (requires setting a width to each cell though)
This is a caption
Column 1Column 2Column 3
Cell 1-1Cell 1-2Cell 1-3
Cell 2-1Cell 2-2Cell 2-3
Cell 3-1Cell 3-2Cell 3-3

Default Styles Configurable

Ok... I must admit that the example above was not super exciting but it helped set a baseline for what tables look like. To help with some additional styling, tables can be configured to:

  • disable row hover behavior with disableHover
  • disable row border behavior with disableBorders
  • allow line-wrapping with the lineWrap prop (can be a boolean or "padded")
  • change the default horizontal and vertical alignments with the hAlign and vAlign props (respectively)

In addition, there is a decent amount of "inheritance" for these styles that comes into play within tables. These styles can be defined and/or overridden from the following components:

  • Table
  • TableHeader
  • TableBody
  • TableFooter
  • TableRow
  • TableCell

where the precedence is in reverse order. For example, if the Table component set the hAlight="right" prop and a TableCell set hAlign="center", the TableCell would still center it's text while all other table cells would be right aligned.

The Table component also allows for a fullWidth prop which will make it expand to always be the same width as the container element or enabling a dense spec that decreases the height of each cell. However, something you'll notice is that the Table component is not responsive by default and will overflow the container element if the content is too wide. This can be "fixed" by wrapping the Table in the TableContainer element, enabling overflow: auto on a parent element, enabling line wrapping, or setting a width on columns that you'd like to overflow.

This might not make too much sense immediately since it's a giant wall of text, so play with the example below and the different configurations to show how this applies.

Root Table Options
Horizontal alignmentleft
Vertical alignmentmiddle
Line wrapfalse
Row 2 Options
Cell 1-2 Options
Horizontal alignmentleft
Vertical alignmentmiddle
Line wrapfalse
Configured Table
Header 1Header 2Header 3
Cell 1-1Cell 1-2 - This is some additional text.Cell 1-3
Cell 2-1Cell 2-2 - This is some additional text.Cell 2-3
Cell 3-1Cell 3-2 - This is some additional text.Cell 3-3
Cell 4-1Cell 4-2 - This is some additional text.Cell 4-3
Cell 5-1Cell 5-2 - This is some additional text.Cell 5-3

Selectable Rows

A common table pattern is to allow a user to select rows either by clicking on a checkbox for that row or to click anywhere in the row. Since react-md is attempting to be a low-level customizable component library, there isn't a super nice table wrapper component that does this for you, but it can be easily implemented by using the selected prop on the TableRow component, the TableCheckbox component, ans the useIndeterminateChecked hook from @react-md/form.

The default colors for a selected row can be configured by changing the rmd-table-row-selected-color variable or using the rmd-table-theme-update-var mixin and overriding the selected-color variable.

Dessert (100g serving)CaloriesFat (g)Carbs (g)Protein (g)Sodium (mg)Calcium (mg)Icon (mg)
Frozen yogurt159624487141
Ice cream sandwhich2379374.312981
Eclair2621637633767
Cupcake3053.7674.341338
Gingerbread35616493.9327716
Jelly bean37509405000
Lollipop3920.29803802
Honeycomb4083.2876.5562045
Donut5225514.9326222
KitKat16665754126

Sortable Columns

Another common functionality found within tables is the ability to sort based on a column header. react-md does not provide a way to sort your data since there are multiple ways to sort a list of data, but it does provide an accessible way to render these sortable headers.

To create a sortable header cell, you'll want to provide the "aria-sort" prop to a TableCell which should be one of the following:

  • "ascending" - The data has been sorted in ascending order. So A-z, 0-9, and earlier dates before later dates.
  • "descending" The data has been sorted in descending order. So z-A, 9-0, and later dates before earlier dates.
  • "other" - The data has been sorted in another programmatic order.
  • "none" - The data has not been sorted ("aria-sort" default)

When the "aria-sort" prop has been set to one of these values, the cell will automatically update the children to be rendered within a button element so that it can be tab-focused and clickable for keyboard users. However when the sort behavior has been set to "none", only the button element will be rendered without the current sort icon to show that it is not currently sorted, but can be.

If you do not like the default behavior of the sort icon and would like to style the children and/or cell manually, you can set the sortIcon prop to null and render your custom children instead.

The example below will show a possible way to implement a sortable table with this behavior.

CupcakePastry3053.7674.341338
DonutPastry5225514.9326222
EclairPastry2621637633767
Frozen yogurtIce cream159624487141
GingerbreadPastry35616493.9327716
HoneycombOther4083.2876.5562045
Ice cream sandwhichIce cream2379374.312981
Jelly beanOther37509405000
KitKatOther16665754126
LollipopOther3920.29803802

Sticky Columns - Part 1

One of the most useful things that can be applied to large tables is to apply sticky headers so that the user can still view what a column type is while they scroll through a large data set. react-md has implemented this functionality with the position: sticky implementation and should work for all your use-cases if you don't need to support IE11 (which isn't a supported browser for this library anyways). If you aren't familiar with the sticky position behavior, it's recommended to read over the sticky positioning documentation on the Mozilla Developer site but I'll also provide a quick summary next.

When an element has position: sticky set, it will be fixed within the closest scroll container based on the top, right, bottom, and left properties. If there are no parent elements that have set the overflow property to scroll or auto, the sticky elements can be positioned relative to the entire document's scroll position within the viewport. This is actually one of the reasons why the Table component is not responsive by default and automatically wrapping itself in the TableContainer component for scroll behavior. Since the scroll container is opt-in, the sticky elements can fixed to the top, right, bottom, and left of the viewport! Super exciting. I know.

Now that the quick summary is over it's time to get into some examples of how this is used within react-md. To create sticky headers, all that is required is to enable the sticky prop on the TableHeader component which will update every TableCell child to use position: sticky with top: 0. If the Table has been wrapped in the TableContainer or another element with overflow set, the headers will be fixed to the top of the scroll area once the user has scrolled a bit.

To start off, the example below will use the TableContainer component with a max-height to show how this functionality works. If you would like to see a viewport based approach, skip to Part 2 of the sticky columns examples.

Header 1Header 2
Row 1 Cell 1Row 1 Cell 2
Row 2 Cell 1Row 2 Cell 2
Row 3 Cell 1Row 3 Cell 2
Row 4 Cell 1Row 4 Cell 2
Row 5 Cell 1Row 5 Cell 2
Row 6 Cell 1Row 6 Cell 2
Row 7 Cell 1Row 7 Cell 2
Row 8 Cell 1Row 8 Cell 2
Row 9 Cell 1Row 9 Cell 2
Row 10 Cell 1Row 10 Cell 2
Row 11 Cell 1Row 11 Cell 2
Row 12 Cell 1Row 12 Cell 2
Row 13 Cell 1Row 13 Cell 2
Row 14 Cell 1Row 14 Cell 2
Row 15 Cell 1Row 15 Cell 2
Row 16 Cell 1Row 16 Cell 2
Row 17 Cell 1Row 17 Cell 2
Row 18 Cell 1Row 18 Cell 2
Row 19 Cell 1Row 19 Cell 2
Row 20 Cell 1Row 20 Cell 2

Sticky Columns - Part 2

Since it might not always be desired to use a scroll container for the sticky columns, it's also possible to use the entire viewport and document instead. The only difference between this example and the example above is that the Table component will no longer be wrapped in the TableContainer component so the scroll behavior is inherited from the entire document as well as updating the top value for the fixed headers.

Since this website uses a fixed AppBar, it would be nice for the sticky table headers to be sticky beneath this AppBar. This can be accomplished by:

  • using the rmd-table-theme-update-var mixin to modify the sticky-header value with the pre-defined AppBar height
  • using the rmd-table-theme-update-var mixin along with the rmd-app-bar-theme-var function to modify the sticky-header value with the current AppBar height if it changes based on viewport size
  • updating the top property for each <td> or <th> in the TableHeader

The example below will use the rmd-table-theme-update-var mixin along with the rmd-app-bar-theme-var function to create a sticky header within the viewport.

Header 1Header 2
Row 1 Cell 1Row 1 Cell 2
Row 2 Cell 1Row 2 Cell 2
Row 3 Cell 1Row 3 Cell 2
Row 4 Cell 1Row 4 Cell 2
Row 5 Cell 1Row 5 Cell 2
Row 6 Cell 1Row 6 Cell 2
Row 7 Cell 1Row 7 Cell 2
Row 8 Cell 1Row 8 Cell 2
Row 9 Cell 1Row 9 Cell 2
Row 10 Cell 1Row 10 Cell 2
Row 11 Cell 1Row 11 Cell 2
Row 12 Cell 1Row 12 Cell 2
Row 13 Cell 1Row 13 Cell 2
Row 14 Cell 1Row 14 Cell 2
Row 15 Cell 1Row 15 Cell 2
Row 16 Cell 1Row 16 Cell 2
Row 17 Cell 1Row 17 Cell 2
Row 18 Cell 1Row 18 Cell 2
Row 19 Cell 1Row 19 Cell 2
Row 20 Cell 1Row 20 Cell 2
Row 21 Cell 1Row 21 Cell 2
Row 22 Cell 1Row 22 Cell 2
Row 23 Cell 1Row 23 Cell 2
Row 24 Cell 1Row 24 Cell 2
Row 25 Cell 1Row 25 Cell 2
Row 26 Cell 1Row 26 Cell 2
Row 27 Cell 1Row 27 Cell 2
Row 28 Cell 1Row 28 Cell 2
Row 29 Cell 1Row 29 Cell 2
Row 30 Cell 1Row 30 Cell 2
Row 31 Cell 1Row 31 Cell 2
Row 32 Cell 1Row 32 Cell 2
Row 33 Cell 1Row 33 Cell 2
Row 34 Cell 1Row 34 Cell 2
Row 35 Cell 1Row 35 Cell 2
Row 36 Cell 1Row 36 Cell 2
Row 37 Cell 1Row 37 Cell 2
Row 38 Cell 1Row 38 Cell 2
Row 39 Cell 1Row 39 Cell 2
Row 40 Cell 1Row 40 Cell 2

Sticky Columns - Part 3

It is also possible to create sticky footers within react-md by enabling the sticky prop on the TableFooter. That being said, sticky cells within the TableFooter are normally different than sticky headers since the normal pattern for a footer is to span the entire width of the table. If that is not the case, you can follow the same pattern as the TableHeader for a sticky footer.

If you want to create a sticky footer that spans the entire width of the table, you'll still want to enable the sticky prop on the TableFooter component to enable the sticky functionality. If you want the TableCell to span the entire width of the table ignoring all the other table cells, also set the colSpan="100%" on the TableCell.

Column 1Column 2Column 3Column 4Column 5Column 6Column 7Column 8Column 9Column 10
Row 1 Cell 1Row 1 Cell 2Row 1 Cell 3Row 1 Cell 4Row 1 Cell 5Row 1 Cell 6Row 1 Cell 7Row 1 Cell 8Row 1 Cell 9Row 1 Cell 10
Row 2 Cell 1Row 2 Cell 2Row 2 Cell 3Row 2 Cell 4Row 2 Cell 5Row 2 Cell 6Row 2 Cell 7Row 2 Cell 8Row 2 Cell 9Row 2 Cell 10
Row 3 Cell 1Row 3 Cell 2Row 3 Cell 3Row 3 Cell 4Row 3 Cell 5Row 3 Cell 6Row 3 Cell 7Row 3 Cell 8Row 3 Cell 9Row 3 Cell 10
Row 4 Cell 1Row 4 Cell 2Row 4 Cell 3Row 4 Cell 4Row 4 Cell 5Row 4 Cell 6Row 4 Cell 7Row 4 Cell 8Row 4 Cell 9Row 4 Cell 10
Row 5 Cell 1Row 5 Cell 2Row 5 Cell 3Row 5 Cell 4Row 5 Cell 5Row 5 Cell 6Row 5 Cell 7Row 5 Cell 8Row 5 Cell 9Row 5 Cell 10
Row 6 Cell 1Row 6 Cell 2Row 6 Cell 3Row 6 Cell 4Row 6 Cell 5Row 6 Cell 6Row 6 Cell 7Row 6 Cell 8Row 6 Cell 9Row 6 Cell 10
Row 7 Cell 1Row 7 Cell 2Row 7 Cell 3Row 7 Cell 4Row 7 Cell 5Row 7 Cell 6Row 7 Cell 7Row 7 Cell 8Row 7 Cell 9Row 7 Cell 10
Row 8 Cell 1Row 8 Cell 2Row 8 Cell 3Row 8 Cell 4Row 8 Cell 5Row 8 Cell 6Row 8 Cell 7Row 8 Cell 8Row 8 Cell 9Row 8 Cell 10
Row 9 Cell 1Row 9 Cell 2Row 9 Cell 3Row 9 Cell 4Row 9 Cell 5Row 9 Cell 6Row 9 Cell 7Row 9 Cell 8Row 9 Cell 9Row 9 Cell 10
Row 10 Cell 1Row 10 Cell 2Row 10 Cell 3Row 10 Cell 4Row 10 Cell 5Row 10 Cell 6Row 10 Cell 7Row 10 Cell 8Row 10 Cell 9Row 10 Cell 10
Row 11 Cell 1Row 11 Cell 2Row 11 Cell 3Row 11 Cell 4Row 11 Cell 5Row 11 Cell 6Row 11 Cell 7Row 11 Cell 8Row 11 Cell 9Row 11 Cell 10
Row 12 Cell 1Row 12 Cell 2Row 12 Cell 3Row 12 Cell 4Row 12 Cell 5Row 12 Cell 6Row 12 Cell 7Row 12 Cell 8Row 12 Cell 9Row 12 Cell 10
Row 13 Cell 1Row 13 Cell 2Row 13 Cell 3Row 13 Cell 4Row 13 Cell 5Row 13 Cell 6Row 13 Cell 7Row 13 Cell 8Row 13 Cell 9Row 13 Cell 10
Row 14 Cell 1Row 14 Cell 2Row 14 Cell 3Row 14 Cell 4Row 14 Cell 5Row 14 Cell 6Row 14 Cell 7Row 14 Cell 8Row 14 Cell 9Row 14 Cell 10
Row 15 Cell 1Row 15 Cell 2Row 15 Cell 3Row 15 Cell 4Row 15 Cell 5Row 15 Cell 6Row 15 Cell 7Row 15 Cell 8Row 15 Cell 9Row 15 Cell 10
Row 16 Cell 1Row 16 Cell 2Row 16 Cell 3Row 16 Cell 4Row 16 Cell 5Row 16 Cell 6Row 16 Cell 7Row 16 Cell 8Row 16 Cell 9Row 16 Cell 10
Row 17 Cell 1Row 17 Cell 2Row 17 Cell 3Row 17 Cell 4Row 17 Cell 5Row 17 Cell 6Row 17 Cell 7Row 17 Cell 8Row 17 Cell 9Row 17 Cell 10
Row 18 Cell 1Row 18 Cell 2Row 18 Cell 3Row 18 Cell 4Row 18 Cell 5Row 18 Cell 6Row 18 Cell 7Row 18 Cell 8Row 18 Cell 9Row 18 Cell 10
Row 19 Cell 1Row 19 Cell 2Row 19 Cell 3Row 19 Cell 4Row 19 Cell 5Row 19 Cell 6Row 19 Cell 7Row 19 Cell 8Row 19 Cell 9Row 19 Cell 10
Row 20 Cell 1Row 20 Cell 2Row 20 Cell 3Row 20 Cell 4Row 20 Cell 5Row 20 Cell 6Row 20 Cell 7Row 20 Cell 8Row 20 Cell 9Row 20 Cell 10
This is the sticky footer content. Any components can be rendered inside.

Sticky Columns - Part 4

Now that you've seen sticky headers and footers, lets add the final peace of allowing sticky cells within the TableBody. To create a sticky TableCell within the TableBody there is no convenience API on the parent TableBody or even TableRow components and must enable the sticky prop on each cell that should be sticky. This is because you'll normally only have one cell that is sticky per row that will be left aligned (or right aligned in RTL languages) instead of making the entire row sticky.

The example below will show how you can create a table with sticky headers, sticky checkboxes, and a sticky row header cell.

Header 1Header 2Header 3Header 4Header 5Header 6Header 7Header 8Header 9Header 10Header 11Header 12Header 13Header 14Header 15Header 16Header 17Header 18Header 19Header 20
Row HeaderCell 1 - 1Cell 1 - 2Cell 1 - 3Cell 1 - 4Cell 1 - 5Cell 1 - 6Cell 1 - 7Cell 1 - 8Cell 1 - 9Cell 1 - 10Cell 1 - 11Cell 1 - 12Cell 1 - 13Cell 1 - 14Cell 1 - 15Cell 1 - 16Cell 1 - 17Cell 1 - 18Cell 1 - 19Cell 1 - 20
Row HeaderCell 2 - 1Cell 2 - 2Cell 2 - 3Cell 2 - 4Cell 2 - 5Cell 2 - 6Cell 2 - 7Cell 2 - 8Cell 2 - 9Cell 2 - 10Cell 2 - 11Cell 2 - 12Cell 2 - 13Cell 2 - 14Cell 2 - 15Cell 2 - 16Cell 2 - 17Cell 2 - 18Cell 2 - 19Cell 2 - 20
Row HeaderCell 3 - 1Cell 3 - 2Cell 3 - 3Cell 3 - 4Cell 3 - 5Cell 3 - 6Cell 3 - 7Cell 3 - 8Cell 3 - 9Cell 3 - 10Cell 3 - 11Cell 3 - 12Cell 3 - 13Cell 3 - 14Cell 3 - 15Cell 3 - 16Cell 3 - 17Cell 3 - 18Cell 3 - 19Cell 3 - 20
Row HeaderCell 4 - 1Cell 4 - 2Cell 4 - 3Cell 4 - 4Cell 4 - 5Cell 4 - 6Cell 4 - 7Cell 4 - 8Cell 4 - 9Cell 4 - 10Cell 4 - 11Cell 4 - 12Cell 4 - 13Cell 4 - 14Cell 4 - 15Cell 4 - 16Cell 4 - 17Cell 4 - 18Cell 4 - 19Cell 4 - 20
Row HeaderCell 5 - 1Cell 5 - 2Cell 5 - 3Cell 5 - 4Cell 5 - 5Cell 5 - 6Cell 5 - 7Cell 5 - 8Cell 5 - 9Cell 5 - 10Cell 5 - 11Cell 5 - 12Cell 5 - 13Cell 5 - 14Cell 5 - 15Cell 5 - 16Cell 5 - 17Cell 5 - 18Cell 5 - 19Cell 5 - 20
Row HeaderCell 6 - 1Cell 6 - 2Cell 6 - 3Cell 6 - 4Cell 6 - 5Cell 6 - 6Cell 6 - 7Cell 6 - 8Cell 6 - 9Cell 6 - 10Cell 6 - 11Cell 6 - 12Cell 6 - 13Cell 6 - 14Cell 6 - 15Cell 6 - 16Cell 6 - 17Cell 6 - 18Cell 6 - 19Cell 6 - 20
Row HeaderCell 7 - 1Cell 7 - 2Cell 7 - 3Cell 7 - 4Cell 7 - 5Cell 7 - 6Cell 7 - 7Cell 7 - 8Cell 7 - 9Cell 7 - 10Cell 7 - 11Cell 7 - 12Cell 7 - 13Cell 7 - 14Cell 7 - 15Cell 7 - 16Cell 7 - 17Cell 7 - 18Cell 7 - 19Cell 7 - 20
Row HeaderCell 8 - 1Cell 8 - 2Cell 8 - 3Cell 8 - 4Cell 8 - 5Cell 8 - 6Cell 8 - 7Cell 8 - 8Cell 8 - 9Cell 8 - 10Cell 8 - 11Cell 8 - 12Cell 8 - 13Cell 8 - 14Cell 8 - 15Cell 8 - 16Cell 8 - 17Cell 8 - 18Cell 8 - 19Cell 8 - 20
Row HeaderCell 9 - 1Cell 9 - 2Cell 9 - 3Cell 9 - 4Cell 9 - 5Cell 9 - 6Cell 9 - 7Cell 9 - 8Cell 9 - 9Cell 9 - 10Cell 9 - 11Cell 9 - 12Cell 9 - 13Cell 9 - 14Cell 9 - 15Cell 9 - 16Cell 9 - 17Cell 9 - 18Cell 9 - 19Cell 9 - 20
Row HeaderCell 10 - 1Cell 10 - 2Cell 10 - 3Cell 10 - 4Cell 10 - 5Cell 10 - 6Cell 10 - 7Cell 10 - 8Cell 10 - 9Cell 10 - 10Cell 10 - 11Cell 10 - 12Cell 10 - 13Cell 10 - 14Cell 10 - 15Cell 10 - 16Cell 10 - 17Cell 10 - 18Cell 10 - 19Cell 10 - 20
Row HeaderCell 11 - 1Cell 11 - 2Cell 11 - 3Cell 11 - 4Cell 11 - 5Cell 11 - 6Cell 11 - 7Cell 11 - 8Cell 11 - 9Cell 11 - 10Cell 11 - 11Cell 11 - 12Cell 11 - 13Cell 11 - 14Cell 11 - 15Cell 11 - 16Cell 11 - 17Cell 11 - 18Cell 11 - 19Cell 11 - 20
Row HeaderCell 12 - 1Cell 12 - 2Cell 12 - 3Cell 12 - 4Cell 12 - 5Cell 12 - 6Cell 12 - 7Cell 12 - 8Cell 12 - 9Cell 12 - 10Cell 12 - 11Cell 12 - 12Cell 12 - 13Cell 12 - 14Cell 12 - 15Cell 12 - 16Cell 12 - 17Cell 12 - 18Cell 12 - 19Cell 12 - 20
Row HeaderCell 13 - 1Cell 13 - 2Cell 13 - 3Cell 13 - 4Cell 13 - 5Cell 13 - 6Cell 13 - 7Cell 13 - 8Cell 13 - 9Cell 13 - 10Cell 13 - 11Cell 13 - 12Cell 13 - 13Cell 13 - 14Cell 13 - 15Cell 13 - 16Cell 13 - 17Cell 13 - 18Cell 13 - 19Cell 13 - 20
Row HeaderCell 14 - 1Cell 14 - 2Cell 14 - 3Cell 14 - 4Cell 14 - 5Cell 14 - 6Cell 14 - 7Cell 14 - 8Cell 14 - 9Cell 14 - 10Cell 14 - 11Cell 14 - 12Cell 14 - 13Cell 14 - 14Cell 14 - 15Cell 14 - 16Cell 14 - 17Cell 14 - 18Cell 14 - 19Cell 14 - 20
Row HeaderCell 15 - 1Cell 15 - 2Cell 15 - 3Cell 15 - 4Cell 15 - 5Cell 15 - 6Cell 15 - 7Cell 15 - 8Cell 15 - 9Cell 15 - 10Cell 15 - 11Cell 15 - 12Cell 15 - 13Cell 15 - 14Cell 15 - 15Cell 15 - 16Cell 15 - 17Cell 15 - 18Cell 15 - 19Cell 15 - 20
Row HeaderCell 16 - 1Cell 16 - 2Cell 16 - 3Cell 16 - 4Cell 16 - 5Cell 16 - 6Cell 16 - 7Cell 16 - 8Cell 16 - 9Cell 16 - 10Cell 16 - 11Cell 16 - 12Cell 16 - 13Cell 16 - 14Cell 16 - 15Cell 16 - 16Cell 16 - 17Cell 16 - 18Cell 16 - 19Cell 16 - 20
Row HeaderCell 17 - 1Cell 17 - 2Cell 17 - 3Cell 17 - 4Cell 17 - 5Cell 17 - 6Cell 17 - 7Cell 17 - 8Cell 17 - 9Cell 17 - 10Cell 17 - 11Cell 17 - 12Cell 17 - 13Cell 17 - 14Cell 17 - 15Cell 17 - 16Cell 17 - 17Cell 17 - 18Cell 17 - 19Cell 17 - 20
Row HeaderCell 18 - 1Cell 18 - 2Cell 18 - 3Cell 18 - 4Cell 18 - 5Cell 18 - 6Cell 18 - 7Cell 18 - 8Cell 18 - 9Cell 18 - 10Cell 18 - 11Cell 18 - 12Cell 18 - 13Cell 18 - 14Cell 18 - 15Cell 18 - 16Cell 18 - 17Cell 18 - 18Cell 18 - 19Cell 18 - 20
Row HeaderCell 19 - 1Cell 19 - 2Cell 19 - 3Cell 19 - 4Cell 19 - 5Cell 19 - 6Cell 19 - 7Cell 19 - 8Cell 19 - 9Cell 19 - 10Cell 19 - 11Cell 19 - 12Cell 19 - 13Cell 19 - 14Cell 19 - 15Cell 19 - 16Cell 19 - 17Cell 19 - 18Cell 19 - 19Cell 19 - 20
Row HeaderCell 20 - 1Cell 20 - 2Cell 20 - 3Cell 20 - 4Cell 20 - 5Cell 20 - 6Cell 20 - 7Cell 20 - 8Cell 20 - 9Cell 20 - 10Cell 20 - 11Cell 20 - 12Cell 20 - 13Cell 20 - 14Cell 20 - 15Cell 20 - 16Cell 20 - 17Cell 20 - 18Cell 20 - 19Cell 20 - 20
Row HeaderCell 21 - 1Cell 21 - 2Cell 21 - 3Cell 21 - 4Cell 21 - 5Cell 21 - 6Cell 21 - 7Cell 21 - 8Cell 21 - 9Cell 21 - 10Cell 21 - 11Cell 21 - 12Cell 21 - 13Cell 21 - 14Cell 21 - 15Cell 21 - 16Cell 21 - 17Cell 21 - 18Cell 21 - 19Cell 21 - 20
Row HeaderCell 22 - 1Cell 22 - 2Cell 22 - 3Cell 22 - 4Cell 22 - 5Cell 22 - 6Cell 22 - 7Cell 22 - 8Cell 22 - 9Cell 22 - 10Cell 22 - 11Cell 22 - 12Cell 22 - 13Cell 22 - 14Cell 22 - 15Cell 22 - 16Cell 22 - 17Cell 22 - 18Cell 22 - 19Cell 22 - 20
Row HeaderCell 23 - 1Cell 23 - 2Cell 23 - 3Cell 23 - 4Cell 23 - 5Cell 23 - 6Cell 23 - 7Cell 23 - 8Cell 23 - 9Cell 23 - 10Cell 23 - 11Cell 23 - 12Cell 23 - 13Cell 23 - 14Cell 23 - 15Cell 23 - 16Cell 23 - 17Cell 23 - 18Cell 23 - 19Cell 23 - 20
Row HeaderCell 24 - 1Cell 24 - 2Cell 24 - 3Cell 24 - 4Cell 24 - 5Cell 24 - 6Cell 24 - 7Cell 24 - 8Cell 24 - 9Cell 24 - 10Cell 24 - 11Cell 24 - 12Cell 24 - 13Cell 24 - 14Cell 24 - 15Cell 24 - 16Cell 24 - 17Cell 24 - 18Cell 24 - 19Cell 24 - 20
Row HeaderCell 25 - 1Cell 25 - 2Cell 25 - 3Cell 25 - 4Cell 25 - 5Cell 25 - 6Cell 25 - 7Cell 25 - 8Cell 25 - 9Cell 25 - 10Cell 25 - 11Cell 25 - 12Cell 25 - 13Cell 25 - 14Cell 25 - 15Cell 25 - 16Cell 25 - 17Cell 25 - 18Cell 25 - 19Cell 25 - 20
Row HeaderCell 26 - 1Cell 26 - 2Cell 26 - 3Cell 26 - 4Cell 26 - 5Cell 26 - 6Cell 26 - 7Cell 26 - 8Cell 26 - 9Cell 26 - 10Cell 26 - 11Cell 26 - 12Cell 26 - 13Cell 26 - 14Cell 26 - 15Cell 26 - 16Cell 26 - 17Cell 26 - 18Cell 26 - 19Cell 26 - 20
Row HeaderCell 27 - 1Cell 27 - 2Cell 27 - 3Cell 27 - 4Cell 27 - 5Cell 27 - 6Cell 27 - 7Cell 27 - 8Cell 27 - 9Cell 27 - 10Cell 27 - 11Cell 27 - 12Cell 27 - 13Cell 27 - 14Cell 27 - 15Cell 27 - 16Cell 27 - 17Cell 27 - 18Cell 27 - 19Cell 27 - 20
Row HeaderCell 28 - 1Cell 28 - 2Cell 28 - 3Cell 28 - 4Cell 28 - 5Cell 28 - 6Cell 28 - 7Cell 28 - 8Cell 28 - 9Cell 28 - 10Cell 28 - 11Cell 28 - 12Cell 28 - 13Cell 28 - 14Cell 28 - 15Cell 28 - 16Cell 28 - 17Cell 28 - 18Cell 28 - 19Cell 28 - 20
Row HeaderCell 29 - 1Cell 29 - 2Cell 29 - 3Cell 29 - 4Cell 29 - 5Cell 29 - 6Cell 29 - 7Cell 29 - 8Cell 29 - 9Cell 29 - 10Cell 29 - 11Cell 29 - 12Cell 29 - 13Cell 29 - 14Cell 29 - 15Cell 29 - 16Cell 29 - 17Cell 29 - 18Cell 29 - 19Cell 29 - 20
Row HeaderCell 30 - 1Cell 30 - 2Cell 30 - 3Cell 30 - 4Cell 30 - 5Cell 30 - 6Cell 30 - 7Cell 30 - 8Cell 30 - 9Cell 30 - 10Cell 30 - 11Cell 30 - 12Cell 30 - 13Cell 30 - 14Cell 30 - 15Cell 30 - 16Cell 30 - 17Cell 30 - 18Cell 30 - 19Cell 30 - 20