Subcomponents

Title

Props	Type	Required
children	string	✅
hasPadding	boolean	❌
stackPadding	boolean	❌
description	string	❌

stackPadding

Adds a padding once the Table component enters into the stakeded mode if it is being implemented. If not, it doesn't do nothing.

description

Adds a text under the title section

ControlBar

Props	Type	Required
children	ReactNode	✅
hasPadding	boolean	❌
stackPadding	boolean	❌

children

It can receive custom HTML layout structures. Basically, it is an empty div that can receive whatever content the project needs. Usually this section will be used to add filters and controls for the Table display.

Content

Props	Type	Required
children	ReactNode	✅
columnSizes	string	❌
fixedColumns	{ column: number, leftPosition: string }	❌
fillStyle	'solid' | 'striped"	❌
borderStyle	'ruled' | 'grid' | 'none'	❌

children

This component will only receive as children the following subcomponents:

• Header

• Body

columnSizes

This property allows to control the behavior of the different column sizing. Basically this is a hook that connects with the grid-template-columns css property that controls the Table layout structure. In here it can be used CSS functions and patters beside just adding single unit values.

Also, keep in mind this CSS property receives one value by each column, so, if your Table has three columns, you should define three values: 1fr 1fr 1fr.

Or you can also use a CSS function: repeat(3, 1fr)

Or combining both patterns (The first column with a static value and the rest of columns with dynamic and repetitive patterns): 24px repeat(2, minmax(500px, 1fr))

fixedColumns

In many cases, it will be required to make horizontal scroll when the column sizing overflows the actual screen width. When this happens, for users accesibility, it is a good idea to fix the first column so the user can keep the context of what item he is reading.

fillStyle and borderStyle

These props controls the different Table presentations for borders and/or fill of the rows.

Header

This subcomponent wrapper controls the header of the Table row structure.

Props	Type	Required
children	ReactNode	✅

children

This component will only receive as children element:

• HeaderCell

HeaderCell

Props	Type	Required
children	ReactNode	✅
alignment	'left' | 'center' | 'right' | 'spaceBetween'	❌

Body

This subcomponent wrapper controls the content where are all the rows of the Table are going to be placed.

Props	Type	Required
children	ReactNode	✅

children

This component will only receive as children the following subcomponents:

• Row

Row

Props	Type	Required
children	ReactNode	✅
isSelected	boolean	❌
hasError	boolean	❌

children

This component will only receive as children the following subcomponents:

• Cell

Cell

Props	Type	Required
children	ReactNode	✅
alignment	'left' | 'center' | 'right' | 'spaceBetween'	❌

Stack

The Stack content is a exclusive content of SDS Table component, where it is being added a new structure that will replace the Table.Content by a more easy to read layout for mobile devices where developers can introduce a simplified version of the Table content.

Props	Type	Required
children	ReactNode	✅
fillStyle	'solid' | 'striped'	❌
borderStyle	'ruled' | 'none'	❌

children

This component will only receive as children the following subcomponents:

• StackHeader

• StackBody

StackHeader

This is a special subcomponent wrapper, that works as a initial row on the top the StackTable layout.

Props	Type	Required
children	ReactNode	✅
columnSizes	string	❌

children

This component will only receive as children the following subcomponents:

• StackHeaderCell

StackHeaderCell

Props	Type	Required
children	ReactNode	✅
alignment	'left' | 'center' | 'right' | 'spaceBetween'	❌

StackBody

This subcomponent wrapper contains the whole structure of the TableStack

Props	Type	Required
children	ReactNode	✅

children

This component will only receive as children the following subcomponents:

• StackItem

StackItem

This subcomponent wrapper represents the rows in the standard Table component. Here, developers are able to insert multiple rows that will be the equivalento to the columns in the standard Table component.

This new structure is to facilitate the reading of rows in mobile devices, opting for a vertical layout instead a horizontal.

Props	Type	Required
children	ReactNode	✅
isSelected	boolean	❌
hasError	boolean	❌

children

This component will only receive as children the following subcomponents:

• StackRow

StackRow

Props	Type	Required
children	ReactNode	✅
columnSizes	string	❌

children

This component will only receive as children the following subcomponents:

• StackCell

StackCell

Props	Type	Required
children	ReactNode	✅
asLabel	boolean	❌
alignment	'left' | 'center' | 'right' | 'spaceBetween'	❌

asLabel

This prop adds styles so the text used inside the StackCell can be visualized as the title of the property to put in the cell next to it.