Table

Table component

Install

import {Table} from '@xsolla/uikit';

Examples

Standard Table:

Label 1

Label 2

Label 3 (long label name)

Label 4

Label 5

1

Test Project

10

20

30

2

Test Project

10

20

30

3

Test Project

10

20

30

Table in fetching state:

Label 1

Label 2

Label 3 (long label name)

Label 4

Label 5

Table with custom empty message:

Label 1

Label 2

Label 3 (long label name)

Label 4

Label 5

No packages available

Xsolla is a video games industry company, providing game developers.

Table with custom head cell:

Label 1 (custom)

Label 2 (custom)

Label 3 (long label name) (custom)

Label 4 (custom)

Label 5 (custom)

1

Test Project

10

20

30

2

Test Project

10

20

30

3

Test Project

10

20

30

Table with custom cell:

Label 1

Label 2

Label 3 (long label name)

Label 4

Label 5

1

Test Project

10

20

30

2

Test Project

10

20

30

3

Test Project

10

20

30

Table with custom rows (expand row on click):

Label 1

Label 2

Label 3 (long label name)

Label 4

Label 5

1

Test Project

10

20

30

2

Test Project

10

20

30

3

Test Project

10

20

30

Table with compact mode:

Label 1

Label 2

Label 3 (long label name)

Label 4

Label 5

1

Test Project

10

20

30

2

Test Project

10

20

30

3

Test Project

10

20

30

Table with sticky column:

Label 1

Label 2

Label 3 (long label name)

Label 4

Label 5

Label 6

Label 7

Label 8

Label 9

1

Test Project

10

20

30

10

20

30

40

2

Test Project

10

20

30

10

20

30

40

3

Test Project

10

20

30

10

20

30

40

Table with sticky head:

Label 1

Label 2

Label 3 (long label name)

Label 4

Label 5

Label 6

Label 7

Label 8

Label 9

1

Test Project

10

20

30

10

20

30

40

2

Test Project

10

20

30

10

20

30

40

3

Test Project

10

20

30

10

20

30

40

4

Test Project

10

20

30

10

20

30

40

5

Test Project

10

20

30

10

20

30

40

6

Test Project

10

20

30

10

20

30

40

Table with horizontal scroll:

Label 1

Label 2

Label 3 (long label name)

Label 4

Label 5

Label 6

Label 7

Label 8

Label 9

1

Test Project

10

20

30

10

20

30

40

2

Test Project

10

20

30

10

20

30

40

3

Test Project

10

20

30

10

20

30

40

Usage

const columns = [{
  id: 'Label 1',
  name: 'Label 1',
  fieldGetter: 'id'
}];
const rows = [{
  id: 1
}];

<Table columns={columns} rows={rows} />

API

PropertyDescriptionTypeDefault
columnsarray of columnsColumn[]
rowsyou data for table. Row object must have an id field.Object[][]
classNameclassName for table wrapperString''
tableClassNametableClassName for tableString''
scrollWrapperClassNamescrollWrapperClassName for tableString''
fetchingflag for show table spinnerBooleanfalse
compactflag for table compact mode (smaller padding size)Booleanfalse
horizontalScrollflag for table custom horizontal scrollBooleanfalse
stickyHeadflag for fixed table head on pageBooleanfalse
renderRowcustom render for rowRenderRow
renderEmptyMessagecustom render for empty message (if rows is empty)RenderEmptyMessage
renderFetchingMessagecustom render for fetching messageRenderFetchingMessage
tableWrapperDataIdtable data idstring

Column API

PropertyDescriptionTypeDefault
iduniq column idString, Number
nameoptional: column nameReact$Node
descriptionoptional: description for head cellReact$Node
fieldGetterMay be string of field name in row object, or function (row) => row.propertyNameString, Function
widthoptional: column width styleString
minWidthoptional: column min-width styleString
maxWidthoptional: column max-width styleString
showoptional: flag for show columnBooleantrue
stickyoptional: flag for sticky columnBooleanfalse
renderHeadCelloptional: custom render for head cellFunction
renderCelloptional: custom render for cellFunction

renderRow API

PropertyDescriptionTypeDefault
rowrow dataObject
columnsarray of columnsColumn[]
compactflag for table compact mode (smaller padding size)Booleanfalse
rowIndexindex of rowNumber
classNamedefault table className for rowStringxsui-table-rowsrow
CellComponentdefault table CellComponentReact.NodeCell

renderEmptyMessage API

PropertyDescriptionTypeDefault
columnsarray of columnsColumn[]
classNamedefault table className message blockStringxsui-table-message

renderFetchingMessage API

PropertyDescriptionTypeDefault
columnsarray of columnsColumn[]
classNamedefault table className message blockStringxsui-table-message

renderHeadCell API

PropertyDescriptionTypeDefault
columnsarray of columnsColumn[]
compactflag for table compact mode (smaller padding size)Booleanfalse
classNamedefault table className for head-cellStringxsui-table-head-cell
styleobject calculated styles for this head cellObject

renderCell API

PropertyDescriptionTypeDefault
columnsarray of columnsColumn[]
rowrow dataObject
rowIndexindex of rowNumber
columnIndexindex of columnNumber
compactflag for table compact mode (smaller padding size)Booleanfalse
valuecell valueany
classNamedefault table className for cellStringxsui-table-cell
styleobject calculated styles for this cellObject