Hemi UI / Hemi OS Reskin / Components / Table Datagrid

Table/Datagrid

Our tables should be styled like the Datagrid. If you see in any figma pages something called Datagrid it means Table in our current version. In the alpha we will not be able to achieve the displayed requirements, because we will need to rewrite the interface. So do not follow the styles exactly just use them as a reference. They will break everything if followed. Not all styles have been exported

#Datagrid
display: flex;
width: 1752px;
padding: 0px var(--Spacing-MD, 16px) 16px var(--Spacing-MD, 16px);
flex-direction: column;
align-items: flex-start;

#Datagrid Row
border-right: 1px solid var(--gray-100, #E5E7E8);
border-left: 1px solid var(--gray-100, #E5E7E8);
background: var(--base-white, #FFF);
#alternate (even rows) backround: #F8F9F9;

#Datagrid Cell
display: flex;
padding: var(--Spacing-MD, 16px);
justify-content: center;
align-items: flex-start;
gap: 10px;
align-self: stretch;

border-right: 1px solid var(--gray-100, #E5E7E8);

#Text
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
flex: 1 0 0;

overflow: hidden;
color: var(--gray-900, var(--Gray-900, #3A3C3F));
font-feature-settings: 'salt' on;
text-overflow: ellipsis;

/* text-sm/medium */
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 20px; /* 142.857% */

#Sort
display: flex;
width: 16px;
height: 16px;
justify-content: center;
align-items: center;
#color of active sort - #00B7FF
#color of inactive sort - #81868F

#Link
color: #0EA5E9;
Is this article helpful?
0 0 0