Change Details

### Summary By default, table cell contents are aligned to the start of the cell. Sometimes, content should be aligned to the end of a cell (e.g. for numbers) or the center (for structural cells meant to create hierarchy). We need to provide an easy way to enable users of this component to set the alignment on a column's cells (both th and td elements. ### Potential solution We could add a property to the TableColumn type called `align` that defaults to `start` but also allows values `center` and `end`. A dynamic CSS class can then be added to the cells for that column to set the alignment. See [[ https://gerrit.wikimedia.org/r/c/design/codex/+/1010921 | this patch ]] for a proof of concept. For text, this can easily be done via `text-align`. We should also consider what to do about cells that contain more than just text (elements or components). --- ### Acceptance criteria - [] Behavior for text vs. other elements/components is defined by design - [] `align` property is added to the TableColumn type - [] `align` property is handled inside the Table component - [] Demos added for this behavior

### Summary By default, table cell contents are aligned to the start of the cell. Sometimes, content should be aligned to the end of a cell (e.g. for numbers) or the center (for structural cells meant to create hierarchy). We need to provide an easy way to enable users of this component to set the alignment on a column's cells (both th and td elements). ### Solution Add a property to the TableColumn type called `textAlign` that defaults to `start` but also allows values `center` and `end`. A dynamic CSS class can then be added to the cells for that column to set the alignment. --- ### Acceptance criteria - [x] Behavior for text vs. other elements/components is defined by design - [] `textAlign` property is added to the TableColumn type - [] `textAlign` property is handled inside the Table component - [] Demos added for this behavior

### Summary By default, table cell contents are aligned to the start of the cell. Sometimes, content should be aligned to the end of a cell (e.g. for numbers) or the center (for structural cells meant to create hierarchy). We need to provide an easy way to enable users of this component to set the alignment on a column's cells (both th and td elements). ### Potential sSolution We could addAdd a property to the TableColumn type called `a`textAlign` that defaults to `start` but also allows values `center` and `end`. A dynamic CSS class can then be added to the cells for that column to set the alignment. See [[ https://gerrit.wikimedia.org/r/c/design/codex/+/1010921 | this patch ]] for a proof of concept. For text, this can easily be done via `text-align`. We should also consider what to do about cells that contain moreA dynamic CSS class can then be added to the cells for than just text (elements or components)t column to set the alignment. --- ### Acceptance criteria - [x] Behavior for text vs. other elements/components is defined by design - [] `atextAlign` property is added to the TableColumn type - [] `atextAlign` property is handled inside the Table component - [] Demos added for this behavior