Skip to content

Commit

Permalink
fix: right align table elements in rtl
Browse files Browse the repository at this point in the history
  • Loading branch information
@tomzemp
tomzemp committed Feb 12, 2024
1 parent e28f2be commit 65a0c5d
Show file tree
Hide file tree
Showing 3 changed files with 136 additions and 0 deletions.
4 changes: 4 additions & 0 deletions components/table/src/table/table-cell-head.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,10 @@ const tableCellHeadStyles = css`
height: 45px;
}
th:dir(rtl) {
text-align: right;
}
.dense {
padding: 9px 12px;
height: 36px;
Expand Down
4 changes: 4 additions & 0 deletions components/table/src/table/table-cell.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,10 @@ const tableCellStyles = css`
height: 45px;
}
td:dir(rtl) {
text-align: right;
}
.dense {
padding: 9px 12px;
height: 36px;
Expand Down
128 changes: 128 additions & 0 deletions components/table/src/table/table.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -594,3 +594,131 @@ export const CustomAlternatingBgColor = () => (
</TableFoot>
</Table>
)

export const RTL = (args) => (
<div dir="rtl">
<Table {...args}>
<TableHead>
<TableRowHead>
<TableCellHead>First name</TableCellHead>
<TableCellHead>Last name</TableCellHead>
<TableCellHead>Incident date</TableCellHead>
<TableCellHead>Last updated</TableCellHead>
<TableCellHead>Age</TableCellHead>
<TableCellHead>Registering unit</TableCellHead>
<TableCellHead>Assigned user</TableCellHead>
<TableCellHead>Status</TableCellHead>
</TableRowHead>
</TableHead>
<TableBody>
<TableRow>
<TableCell>Onyekachukwu</TableCell>
<TableCell>Kariuki</TableCell>
<TableCell>02/06/2007</TableCell>
<TableCell>05/25/1972</TableCell>
<TableCell>66</TableCell>
<TableCell>Jawi</TableCell>
<TableCell>Sofie Hubert</TableCell>
<TableCell>Incomplete</TableCell>
</TableRow>
<TableRow>
<TableCell>Kwasi</TableCell>
<TableCell>Okafor</TableCell>
<TableCell>08/11/2010</TableCell>
<TableCell>02/26/1991</TableCell>
<TableCell>38</TableCell>
<TableCell>Mokassie MCHP</TableCell>
<TableCell>Dashonte Clarke</TableCell>
<TableCell>Complete</TableCell>
</TableRow>
<TableRow>
<TableCell>Siyabonga</TableCell>
<TableCell>Abiodun</TableCell>
<TableCell>07/21/1981</TableCell>
<TableCell>02/06/2007</TableCell>
<TableCell>98</TableCell>
<TableCell>Bathurst MCHP</TableCell>
<TableCell>Unassigned</TableCell>
<TableCell>Incomplete</TableCell>
</TableRow>
<TableRow>
<TableCell>Chiyembekezo</TableCell>
<TableCell>Okeke</TableCell>
<TableCell>01/23/1982</TableCell>
<TableCell>07/15/2003</TableCell>
<TableCell>2</TableCell>
<TableCell>Mayolla MCHP</TableCell>
<TableCell>Wan Gengxin</TableCell>
<TableCell>Incomplete</TableCell>
</TableRow>
<TableRow>
<TableCell>Mtendere</TableCell>
<TableCell>Afolayan</TableCell>
<TableCell>08/12/1994</TableCell>
<TableCell>05/12/1972</TableCell>
<TableCell>37</TableCell>
<TableCell>Gbangadu MCHP</TableCell>
<TableCell>Gvozden Boskovsky</TableCell>
<TableCell>Complete</TableCell>
</TableRow>
<TableRow>
<TableCell>Inyene</TableCell>
<TableCell>Okonkwo</TableCell>
<TableCell>04/01/1971</TableCell>
<TableCell>03/16/2000</TableCell>
<TableCell>70</TableCell>
<TableCell>Kunike Barina</TableCell>
<TableCell>Oscar de la Cavallería</TableCell>
<TableCell>Complete</TableCell>
</TableRow>
<TableRow>
<TableCell>Amaka</TableCell>
<TableCell>Pretorius</TableCell>
<TableCell>01/25/1996</TableCell>
<TableCell>09/15/1986</TableCell>
<TableCell>32</TableCell>
<TableCell>Bargbo</TableCell>
<TableCell>Alberto Raya</TableCell>
<TableCell>Incomplete</TableCell>
</TableRow>
<TableRow>
<TableCell>Meti</TableCell>
<TableCell>Abiodun</TableCell>
<TableCell>10/24/2010</TableCell>
<TableCell>07/26/1989</TableCell>
<TableCell>8</TableCell>
<TableCell>Majihun MCHP</TableCell>
<TableCell>Unassigned</TableCell>
<TableCell>Complete</TableCell>
</TableRow>
<TableRow>
<TableCell>Eshe</TableCell>
<TableCell>Okeke</TableCell>
<TableCell>01/31/1995</TableCell>
<TableCell>01/31/1995</TableCell>
<TableCell>63</TableCell>
<TableCell>Mambiama CHP</TableCell>
<TableCell>Shadrias Pearson</TableCell>
<TableCell>Incomplete</TableCell>
</TableRow>
<TableRow>
<TableCell>Obi</TableCell>
<TableCell>Okafor</TableCell>
<TableCell>06/07/1990</TableCell>
<TableCell>01/03/2006</TableCell>
<TableCell>28</TableCell>
<TableCell>Dalakuru CHP</TableCell>
<TableCell>Anatoliy Shcherbatykh</TableCell>
<TableCell>Incomplete</TableCell>
</TableRow>
</TableBody>
<TableFoot>
<TableRow>
<TableCell colSpan="8">
<TableFooterButton />
</TableCell>
</TableRow>
</TableFoot>
</Table>
</div>
)

0 comments on commit 65a0c5d

Please sign in to comment.