FinallyReact Design Library

Table

(╯°□°）╯︵ ┻━┻

The Table component can be used by importing { Table } from "finallyreact".

Example

Name	Age
Marceline Abadeer	1000
Princess Bubblegum	1000
Flame Princess	21

Custom Renders

Name	Age
Marceline Abadeer	Age
Princess Bubblegum	1000
Flame Princess	21

Custom Styles

Name	Age
Marceline Abadeer	1000
Princess Bubblegum	1000
Flame Princess	21

Column Sort

Set column.enableSort to true for each column that's sortable and use the onSort prop to write sorting logic for your data

Name	Age
Marceline Abadeer	1000
Princess Bubblegum	1000
Flame Princess	21

Customize Sort

Use customSortIconAsc and customSortIconDesc for custom icons or sortIconProps for custom props values

Name	Age	Hobby
Marceline Abadeer	1000	guitar
Princess Bubblegum	1000	science
Flame Princess	21	rapping

Pagination

ID	Name	Favorite Color	Favorite Food	Hobby
1	Aiko	blue	tofu	reading
2	Chieko	green	tempeh	programming
3	Emiko	yellow	vegan croissant	crocheting
4	Fumiko	pink	vegan ice cream	knitting
5	Haruko	purple	vegan chocolate	drawing
6	Hiroko	indigo	vegan cake	gaming
7	Junko	lavender	vegan pizza	anime
8	Kazuko	sakura	nachos	manga
9	Mieko	blue	vegan ramen	singing
10	Mitsuko	green	hummus sandwich	reading

Disabled

ID	Name	Favorite Color	Favorite Food	Hobby
1	Aiko	blue	tofu	reading
2	Chieko	green	tempeh	programming
3	Emiko	yellow	vegan croissant	crocheting
4	Fumiko	pink	vegan ice cream	knitting
5	Haruko	purple	vegan chocolate	drawing

Simple

Name	Age
Marceline Abadeer	1000
Princess Bubblegum	1000
Flame Princess	21

Mobile View

Name

Marceline Abadeer

Age

1000

Name

Princess Bubblegum

Age

1000

Name

Flame Princess

Age

Table Props

Prop Name	Prop Type	Description
columns	object[]	Columns for the table
columns[].enableSort	boolean	Whether the column is sortable; requires onSort prop
columns[].headerCell	(headerIndex, headerLabel) => React.ReactNode	Custom rendering for the header cell
columns[].index	string \| number	Unique identifier for the column
columns[].label	any	Label for the column
columns[].rowCell	object	Custom rendering for the row cell
columns[].rowCell[].headerIndex	string \| number	Unique identifier for the row cell
columns[].rowCell[].headerLabel	any	Label for the row cell
columns[].rowCell[].rowCellIndex	string \| number	Unique identifier for the row cell
columns[].rowCell[].rowCellLabel	any	Label for the row cell
customSortIconAsc	React.ReactNode	Custom sort icon for ascending order
customSortIconDesc	React.ReactNode	Custom sort icon for descending order
defaultSortOrder	{ index, order }[]	Default Sort Order object for columns
disabled	boolean	Disables user interaction
headerRowCellProps	HTMLAttributes	Props for the header row cells
headerRowProps	HTMLAttributes	Props for the header row
isMobile	boolean	Whether the table is in mobile view
mobileCellKeyProps	HTMLAttributes	Props for the mobile cell key
mobileCellValueProps	HTMLAttributes	Props for the mobile cell value
onSort	({ index, order }) => void	Callback for when a column is sorted; required for table sorting
paginationProps	Pagination	Props for the table pagination component
rowCellProps	HTMLAttributes	Props for the row cells
rowProps	HTMLAttributes	Props for the rows
rows	object[]	Rows for the table
rows[].cells	object[]	Cells for the row
rows[].cells[].index	string \| number	Unique identifier for the row cell
rows[].cells[].label	any	Label for the row cell
rows[].cells[].render	(rowCellIndex, rowCellLabel) => React.ReactNode	Custom rendering for the row cell
showPagination	boolean	Whether to show table pagination
simple	boolean	Simple table with no styles
sortIconProps	HTMLAttributes	Props for the sort icon

Table

(╯°□°）╯︵ ┻━┻

The Table component can be used by importing { Table } from "finallyreact".

Example

Name	Age
Marceline Abadeer	1000
Princess Bubblegum	1000
Flame Princess	21

Custom Renders

Name	Age
Marceline Abadeer	Age
Princess Bubblegum	1000
Flame Princess	21

Custom Styles

Name	Age
Marceline Abadeer	1000
Princess Bubblegum	1000
Flame Princess	21

Column Sort

Set column.enableSort to true for each column that's sortable and use the onSort prop to write sorting logic for your data

Name	Age
Marceline Abadeer	1000
Princess Bubblegum	1000
Flame Princess	21

Customize Sort

Use customSortIconAsc and customSortIconDesc for custom icons or sortIconProps for custom props values

Name	Age	Hobby
Marceline Abadeer	1000	guitar
Princess Bubblegum	1000	science
Flame Princess	21	rapping

Pagination

ID	Name	Favorite Color	Favorite Food	Hobby
1	Aiko	blue	tofu	reading
2	Chieko	green	tempeh	programming
3	Emiko	yellow	vegan croissant	crocheting
4	Fumiko	pink	vegan ice cream	knitting
5	Haruko	purple	vegan chocolate	drawing
6	Hiroko	indigo	vegan cake	gaming
7	Junko	lavender	vegan pizza	anime
8	Kazuko	sakura	nachos	manga
9	Mieko	blue	vegan ramen	singing
10	Mitsuko	green	hummus sandwich	reading

Disabled

ID	Name	Favorite Color	Favorite Food	Hobby
1	Aiko	blue	tofu	reading
2	Chieko	green	tempeh	programming
3	Emiko	yellow	vegan croissant	crocheting
4	Fumiko	pink	vegan ice cream	knitting
5	Haruko	purple	vegan chocolate	drawing

Simple

Name	Age
Marceline Abadeer	1000
Princess Bubblegum	1000
Flame Princess	21

Mobile View

Name

Marceline Abadeer

Age

1000

Name

Princess Bubblegum

Age

1000

Name

Flame Princess

Age

Table Props

Prop Name	Prop Type	Description
columns	object[]	Columns for the table
columns[].enableSort	boolean	Whether the column is sortable; requires onSort prop
columns[].headerCell	(headerIndex, headerLabel) => React.ReactNode	Custom rendering for the header cell
columns[].index	string \| number	Unique identifier for the column
columns[].label	any	Label for the column
columns[].rowCell	object	Custom rendering for the row cell
columns[].rowCell[].headerIndex	string \| number	Unique identifier for the row cell
columns[].rowCell[].headerLabel	any	Label for the row cell
columns[].rowCell[].rowCellIndex	string \| number	Unique identifier for the row cell
columns[].rowCell[].rowCellLabel	any	Label for the row cell
customSortIconAsc	React.ReactNode	Custom sort icon for ascending order
customSortIconDesc	React.ReactNode	Custom sort icon for descending order
defaultSortOrder	{ index, order }[]	Default Sort Order object for columns
disabled	boolean	Disables user interaction
headerRowCellProps	HTMLAttributes	Props for the header row cells
headerRowProps	HTMLAttributes	Props for the header row
isMobile	boolean	Whether the table is in mobile view
mobileCellKeyProps	HTMLAttributes	Props for the mobile cell key
mobileCellValueProps	HTMLAttributes	Props for the mobile cell value
onSort	({ index, order }) => void	Callback for when a column is sorted; required for table sorting
paginationProps	Pagination	Props for the table pagination component
rowCellProps	HTMLAttributes	Props for the row cells
rowProps	HTMLAttributes	Props for the rows
rows	object[]	Rows for the table
rows[].cells	object[]	Cells for the row
rows[].cells[].index	string \| number	Unique identifier for the row cell
rows[].cells[].label	any	Label for the row cell
rows[].cells[].render	(rowCellIndex, rowCellLabel) => React.ReactNode	Custom rendering for the row cell
showPagination	boolean	Whether to show table pagination
simple	boolean	Simple table with no styles
sortIconProps	HTMLAttributes	Props for the sort icon