Change Details

Note that this should be done after T360080. This task covers the CSS-only version of the Table component. Supported functionality: - All structural elements - Horizontal scroll - Row selection Note that we may also want to add a demo showing how you could do sorting without JS, but this will be a fairly complex example, so we should consider whether this is needed. An alternative would be showing an example of how to include space for the sort icon without JS, so that you could replace the Table with the Vue version with the sort icon once JS loads without disrupting the layout. Demos: 1. Markup structure example that contains the following structural elements. The alignment classes should also be explained above the demo, and used within the demo. 1. Header content 2. Table with just a few columns (the Olympics example from the configurable demo can be reused) 3. Footer content 2. Additional table features: visually-hidden caption, row headers, and vertical borders. The "list of MediaWikis" example from the "with custom table elements" demo can be reused. 1. No header, since there is no visible caption 2. Table content with `cdx-table__table--borders-vertical` on the table element and row headers 3. <tfoot> included (as in the Vue version of this demo) 3. Table with selection. We will need to include a `<form>` element somewhere and use a submit button in the header, so that something can be done on the backend with the checked checkboxes when the form is submitted. The example from the Vue version of the row selection demo can be reused. --- ### Acceptance criteria - [] The CSS-only Table is documented on the docs site demo page

Note that this should be done after T360080. This task covers the CSS-only version of the Table component. Supported functionality: - All structural elements - Horizontal scroll - Row selection Note that we may also want to add a demo showing how you could do sorting without JS, but this will be a fairly complex example, so we should consider whether this is needed. An alternative would be showing an example of how to include space for the sort icon without JS, so that you could replace the Table with the Vue version with the sort icon once JS loads without disrupting the layout. Demos: 1. Markup structure example that contains the following structural elements. The alignment classes should also be explained above the demo, and used within the demo. 1. Header content 2. Table with just a few columns (the Olympics example from the configurable demo can be reused) 3. Footer content 2. Additional table features: visually-hidden caption, row headers, and vertical borders. The "list of MediaWikis" example from the "with custom table elements" demo can be reused. 1. No header, since there is no visible caption 2. Table content with `cdx-table__table--borders-vertical` on the table element and row headers 3. <tfoot> included (as in the Vue version of this demo) 3. Table with selection. We will need to include a `<form>` element somewhere and use a submit button in the header, so that something can be done on the backend with the checked checkboxes when the form is submitted. The example from the Vue version of the row selection demo can be reused. --- ### Acceptance criteria - [x] The CSS-only Table is documented on the docs site demo page

Note that this should be done after T360080. This task covers the CSS-only version of the Table component. Supported functionality: - All structural elements - Horizontal scroll - Row selection Note that we may also want to add a demo showing how you could do sorting without JS, but this will be a fairly complex example, so we should consider whether this is needed. An alternative would be showing an example of how to include space for the sort icon without JS, so that you could replace the Table with the Vue version with the sort icon once JS loads without disrupting the layout. Demos: 1. Markup structure example that contains the following structural elements. The alignment classes should also be explained above the demo, and used within the demo. 1. Header content 2. Table with just a few columns (the Olympics example from the configurable demo can be reused) 3. Footer content 2. Additional table features: visually-hidden caption, row headers, and vertical borders. The "list of MediaWikis" example from the "with custom table elements" demo can be reused. 1. No header, since there is no visible caption 2. Table content with `cdx-table__table--borders-vertical` on the table element and row headers 3. <tfoot> included (as in the Vue version of this demo) 3. Table with selection. We will need to include a `<form>` element somewhere and use a submit button in the header, so that something can be done on the backend with the checked checkboxes when the form is submitted. The example from the Vue version of the row selection demo can be reused. --- ### Acceptance criteria - [x] The CSS-only Table is documented on the docs site demo page