Datatable docs

docs/components/data-table.mdx

@@ -1,41 +1,48 @@
 # Data table
 
-Data tables are containers for displaying information. They allow users to quickly scan, sort, compare, and take action on large amounts of data.
+Data tables are containers for displaying information. They allow users to quickly scan, sort, compare, and take action
+on large amounts of data.
 
-<Imagefullwidth image="coming-soon.svg" title="Data table example" />
+<Imagefullwidth image="data-table-hero.svg" title="Data table example" />
 
 <TableOfContents />
 
 ## Anatomy
 
-<Imagefullwidth image="coming-soon.svg" title="Data table anatomy example" />
+<Imagefullwidth image="data-table-anatomy.svg" title="Data table anatomy example" />
 
-A table contains a header row at the top that has column names, and below there are rows of data. Tables should be used when there are three or more columns of information.
+<strong>Sortable</strong> table headings has the color primary-blue to idicate interaction
+<br /> <strong>Clicked</strong> sortable headings indicates sorting direction with an arrow(svg)
+<br />
+Table headings with <strong>description text</strong> is indicated with an clickable svg(question) to call an popover.
 
 ## Options
 
-<Guideline title="Variants">
-    Data tables come in three different styles - default, borderless and blue. Default is the most commonly used style and fits well in most page layout hierarchies. Borderless is subtle and lightweight, and can be used when there are less rows, or when the information is easy to scan without the help of the divider lines. Blue, which is also commonly known as a zebra style table, is best to use when you need to give your table more visual focus, or when the table contains 10 or more rows, as the zebra-like style makes it easier to scan the data within the table.
+<Guideline title="Default" image="data-table-options-default.svg">
+  White tables are for when a table is meant to be supplementary, subtle, or lightweight.
+  <br />
+  <br />
+  White tables are also better suited for tables with expandable rows.
 </Guideline>
 
-<Guideline title="Row dividers">
-    Dividers are used for organizing table content and aid the user in parsing related data. in the case og our "blue" variant, we group the whole rows in a zebra-like background color to help the user easily differentiate and scan the different rows of data.
+<Guideline title="Zebra" image="data-table-options-zebra.svg">
+  Use zebra table for easier scannability when the table has more than 10 rows.
 </Guideline>
 
 ## Usage guidelines
 
-<Guideline title="Left align textual data">
-    Similar to a paragraph of text, textual data is always left-aligned within a table. Center alignment should never be used.
+<Guideline title="Left align textual data" image="data-table-guidelines-alignment.svg">
+  Similar to a paragraph of text, textual data is always left-aligned within a table. Never use center alignment
 </Guideline>
 
-<Guideline title="Right align numerical data">
-    Numerical data should generally be right-aligned for the ease of scanning and comparing. This should only be left-aligned when numbers are arbitrary identifiers, known as “nominal numbers,” which means they can’t be compared or combined arithmetically (e.g., ZIP codes, IP addresses, phone numbers). Column headers follow the alignment of the data.
+<Guideline title="Right align numerical data" image="data-table-guidelines-alignment.svg">
+  Numerical data should generally be right-aligned for the ease of scanning and comparing.
 </Guideline>
 
-<Guideline title="Respect vertical alignment">
-    All content should be centered vertically within the row to offer the right visual balance.
+<Guideline title="Respect vertical alignment" image="data-table-guidelines-alignment.svg">
+  All content should be centered vertically within the row to offer the right visual balance.
 </Guideline>
 
-<Guideline title="Use an en dash (–) for missing values">
-    When there are gaps in the data, use an en dash (–) to represent null or not applicable (N/A) values.
+<Guideline title="Use an en dash (–) for missing values" image="data-table-guidelines-dash.svg">
+  When there are gaps in the data, use an en dash (-) to represent null or not applicable (N/A) values.
 </Guideline>