BaseTableComponent

Core table component that displays tabular data with rich features including sorting, resizing, selection, expansion, and inline editing capabilities.

Features:

• Column sorting (single and multi-column)

• Column resizing (resets on refresh)

• Row selection

• Expandable child rows

• Inline editing mode

• Custom renderers for cells, rows, and headers

• Loading states with skeleton rows

• Action columns (edit, delete, custom actions)

Installation

import { BaseTableComponent } from 'uxp/components';

Signature

const BaseTableComponent: React.FunctionComponent<BaseTableComponentProps>

Examples

tsx
// Basic usage
<BaseTableComponent
  columns={processedColumns}
  data={users}
  loading={false}
  totalWidth="100%"
  handleResize={(id, width) => console.log('Resized', id, width)}
/>

tsx
// With sorting
<BaseTableComponent
  columns={processedColumns}
  data={users}
  loading={false}
  totalWidth="100%"
  handleResize={(id, width) => {}}
  sort={{ name: 1, age: -1 }}
  multiColumnSort={true}
  onChangeSort={(newSort) => setSort(newSort)}
/>

tsx
// With editable mode
<BaseTableComponent
  columns={processedColumns}
  data={users}
  loading={false}
  totalWidth="100%"
  handleResize={(id, width) => {}}
  editable={{
    onAddItem: async (index, item) => {
      await api.create(item);
      return true;
    },
    onUpdateItem: async (index, item) => {
      await api.update(item);
      return true;
    },
    onDeleteItem: async (index, item) => {
      await api.delete(item);
      return true;
    },
    onCancelNewItem: () => console.log('Cancelled new item'),
    onCancelItem: () => console.log('Cancelled edit')
  }}
/>

tsx
// With selection and click handlers
<BaseTableComponent
  columns={processedColumns}
  data={users}
  loading={false}
  totalWidth="100%"
  handleResize={(id, width) => {}}
  onClickRow={(e, row) => console.log('Clicked', row)}
  isRowSelected={(row) => selectedIds.includes(row.id)}
  onSelectRow={(row) => toggleSelection(row.id)}
/>

Properties

Name	Type	Mandatory	Default Value	Example Value
columns	{ [id: string]: ExtendedColumn }	Yes	-	-
data	RowData[]	Yes	-	-
loading	boolean	Yes	-	-
noItemsMessage	string | React.ReactNode	No	-	-
totalWidth	string | number	Yes	-	-
handleResize	(id: string, width: number) => void	Yes	-	-
renderHeader	(columns: { [id: string]: ExtendedColumn }, handleResize: (id: string, width: number) => void) => React.ReactNode	No	-	-
renderRow	(tableRowProps: TableRowProps) => React.ReactNode	No	-	-
renderChildRows	(childRows: RowData[], rowProps: TableRowBasicProps) => React.ReactNode	No	-	-
onClickRow	(e: React.MouseEvent, item: RowData) => void	No	-	-
isRowSelected	(item: RowData) => boolean	No	-	-
onSelectRow	(item: RowData) => void	No	-	-
sort	Sort	No	-	-
multiColumnSort	boolean	No	-	-
onChangeSort	(sort: Sort) => void	No	-	-
editable	EditableConfig	No	-	-

Related Types

• BaseTableComponentProps

• ExtendedColumn

• Column

• RowData

• TableRowProps

• TableRowBasicProps

• EditableRowConfig

• Sort

• SortOrder

• EditableConfig