{"id":21832015,"url":"https://github.com/neo4j-devtools/relatable","last_synced_at":"2026-05-20T07:06:44.635Z","repository":{"id":38994437,"uuid":"259233661","full_name":"neo4j-devtools/relatable","owner":"neo4j-devtools","description":"An abstraction over the react-table API to facilitate creating performant data tables","archived":false,"fork":false,"pushed_at":"2023-07-18T21:55:12.000Z","size":6712,"stargazers_count":0,"open_issues_count":20,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-01-26T09:21:41.239Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://neo4j-apps.github.io/relatable/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/neo4j-devtools.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-04-27T07:06:44.000Z","updated_at":"2020-04-29T09:17:25.000Z","dependencies_parsed_at":"2025-01-26T09:21:16.925Z","dependency_job_id":null,"html_url":"https://github.com/neo4j-devtools/relatable","commit_stats":null,"previous_names":["neo4j-apps/relatable"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/neo4j-devtools%2Frelatable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/neo4j-devtools%2Frelatable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/neo4j-devtools%2Frelatable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/neo4j-devtools%2Frelatable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/neo4j-devtools","download_url":"https://codeload.github.com/neo4j-devtools/relatable/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244806200,"owners_count":20513400,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-27T19:17:19.042Z","updated_at":"2026-05-20T07:06:39.607Z","avatar_url":"https://github.com/neo4j-devtools.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Relate by UI - Relatable\n--------------------\nThis package is part of the [Relate by UI Kit](http://neo4j-apps.github.io/relate-by-ui), an opiniated collection of components and styles based on Semantic UI.\n\nThis package provides an abstraction over the [react-table API](https://react-table.js.org/api) to facilitate creating performant data tables.\n\n\n---\n\n## Table of Contents\n1. [Basic Usage](#basic-usage)\n2. [Advanced Usage](#advanced-usage)\n3. [Base Components](#base-components)\n4. [Exposed Typings](#exposed-typings)\n5. [Add-ons](#add-ons)\n6. [Further Enhancements](#further-enhancements)\n\n---\n## Basic usage\n```typescript jsx\nimport React from 'react';\nimport Relatable from '@relate-by-ui/relatable';\n\n// see https://react-table.js.org/api/usetable\nconst COLUMNS = []\nconst DATA = []\n\nconst ATable = () =\u003e \u003cRelatable columns={COLUMNS} data={DATA}/\u003e\n```\n\n## Advanced usage\n```typescript jsx\nimport React from 'react';\nimport Relatable, {Table, Toolbar, Pagination} from '@relate-by-ui/relatable';\n\n// see https://react-table.js.org/api/usetable\nconst COLUMNS = []\nconst DATA = []\n\nconst ATable = () =\u003e (\n  \u003cRelatable columns={COLUMNS} data={DATA}\u003e\n    \u003cToolbar/\u003e\n    \u003cTable/\u003e\n    \u003cPagination/\u003e\n  \u003c/Relatable\u003e\n)\n```\n---\n\n## Base components\nThere are currently four components available:\n- [Relatable (default)](#relatable-default)\n- [Table](#table)\n- [Toolbar](#toolbar)\n- [Pagination](#pagination)\n\n### Relatable (default)\n[Source](./src/components/relatable/relatable.tsx)\n\nThe base component of the library.\n\n```typescript\nimport React from 'react';\nimport {\n  StateChangeHandler,\n  ITableProps,\n  IWithFiltersOptions,\n  IWithGroupingOptions,\n  IWithSortingOptions,\n  IWithPaginationOptions,\n  IWithExpandedOptions,\n  IWithSelectionOptions\n} from '@relate-by-ui/relatable'\n\nexport interface IRelatableProps {\n  // see https://react-table.js.org/api/usetable\n  columns: any[];\n  data: any[];\n  defaultColumn?: any;\n  \n  // Relatable state change handler\n  onStateChange?: StateChangeHandler;\n  \n  // add on options\n  filterable?: boolean | IWithFiltersOptions;\n  groupable?: boolean | IWithGroupingOptions;\n  sortable?: boolean | IWithSortingOptions;\n  expandable?: boolean | IWithExpandedOptions;\n  paginated?: boolean | IWithPaginationOptions;\n  selectable?: boolean | IWithSelectionOptions;\n}\n\n// when used without children, Table props are passed along as well\nexport interface IRelatableBasicProps extends IRelatableProps, ITableProps {\n}\n\nexport interface IRelatableChildrenProps extends React.PropsWithChildren\u003cIRelatableProps\u003e {\n}\n\nfunction Relatable(props: IRelatableChildrenProps | IRelatableBasicProps): JSX.Element;\n```\n\n### Table\n[Source](src/components/table.tsx)\n\nThe Table component of the library.\n\n```typescript\nexport interface ITableProps {\n  // used for rendering loading animation and empty rows\n  loading?: boolean;\n  expectedRowCount?: number;\n  headless?: boolean;\n\n  // semantic ui react props https://react.semantic-ui.com/collections/table/\n  attached?: boolean | string;\n  basic?: boolean | string;\n  className?: string;\n  collapsing?: boolean;\n  color?: string;\n  compact?: boolean | string;\n  definition?: boolean;\n  fixed?: boolean;\n  inverted?: boolean;\n  padded?: boolean | string;\n  singleLine?: boolean;\n  size?: string;\n  striped?: boolean;\n  structured?: boolean;\n  textAlign?: string;\n  verticalAlign?: string;\n}\n\nfunction Table({ loading, expectedRowCount, ...rest }: ITableProps): JSX.Element;\n```\n\n### Toolbar\n[Source](./src/components/toolbar/toolbar.tsx)\n\nThe Toolbar component of the library. Enables basic interaction for:\n- [Groupable](#groupable)\n- [Filterable](#filterable)\n- [Sortable](#sortable)\n- [Selectable](#selectable)\n\nSee [Toolbar Items](#toolbar-items) for examples on how to create your own interactive elements for the table.\n\n```typescript\nimport React from 'react';\nimport {MenuProps} from 'semantic-ui-react';\n\nfunction Toolbar(props: React.PropsWithChildren\u003cMenuProps\u003e = {}): JSX.Element;\n```\n\n#### Basic Usage\n```typescript jsx\nimport React from 'react';\nimport Relatable, {Table, Toolbar} from '@relate-by-ui/relatable';\n\n// see https://react-table.js.org/api/usetable\nconst COLUMNS = []\nconst DATA = []\n\nconst ATable = () =\u003e (\n  \u003cRelatable columns={COLUMNS} data={DATA}\u003e\n    \u003cToolbar/\u003e\n    \u003cTable/\u003e\n  \u003c/Relatable\u003e\n)\n```\n\n#### Advanced Usage\n```typescript jsx\nimport React from 'react';\nimport Relatable, {Table, Toolbar, FilterableToolbar, GroupableToolbar} from '@relate-by-ui/relatable';\n\n// see https://react-table.js.org/api/usetable\nconst COLUMNS = []\nconst DATA = []\n\nconst ATable = () =\u003e (\n  \u003cRelatable columns={COLUMNS} data={DATA}\u003e\n    \u003cToolbar\u003e\n      \u003cFilterableToolbar/\u003e\n      \u003cGroupableToolbar/\u003e\n    \u003c/Toolbar\u003e\n    \u003cTable/\u003e\n  \u003c/Relatable\u003e\n)\n```\n\n### Pagination\n[Source](./src/components/pagination.tsx)\n\nThe Pagination component of the library.\n\n```typescript\nimport {PaginationProps} from 'semantic-ui-react';\n\nimport {Omit} from './\u003cinternal\u003e'\n\nexport interface IPaginationProps extends Omit\u003cPaginationProps, 'totalPages'\u003e{\n  totalPages?: number;\n}\n\nfunction Pagination(props: IPaginationProps = {}): JSX.Element;\n```\n\n---\n\n## Exposed typings\n[Source](./src/relatable.types.ts)\n\n```typescript\nimport {\n  Row,\n  ColumnInstance,\n  UseExpandedRowProps,\n  UseGroupByColumnProps,\n  UseFiltersColumnProps,\n  UseSortByColumnProps,\n  Cell,\n} from 'react-table';\n\nexport type CellCollSpanGetter\u003cData extends object = any\u003e = (cell: Cell\u003cData\u003e) =\u003e number | string | undefined;\nexport type StateChangeHandler = (state: any, changedKeys: string[]) =\u003e void;\nexport type PageSetter = (pageIndex: number) =\u003e void;\nexport type PageSizeSetter = (pageSize: number) =\u003e void;\nexport type GroupSetter\u003cData extends object = any\u003e = (column: (ColumnInstance\u003cData\u003e \u0026 UseGroupByColumnProps\u003cData\u003e), group: boolean) =\u003e void;\nexport type ExpandSetter\u003cData extends object = any\u003e = (rows: (Row\u003cData\u003e \u0026 UseExpandedRowProps\u003cData\u003e)[], expand: boolean) =\u003e void;\nexport type SelectSetter\u003cData extends object = any\u003e = (rows: Row\u003cData\u003e[], select: boolean) =\u003e void;\n\n/* Sorting */\nexport enum SORT_ACTIONS {\n  SORT_CLEAR = 'SORT_CLEAR',\n  SORT_DESC = 'SORT_DESC',\n  SORT_ASC = 'SORT_ASC',\n}\n\nexport type SortSetter\u003cData extends object = any\u003e = (column: (ColumnInstance\u003cData\u003e \u0026 UseSortByColumnProps\u003cData\u003e), action: SORT_ACTIONS) =\u003e void;\n\n/* Filters */\nexport enum FILTER_ACTIONS {\n  FILTER_CLEAR = 'FILTER_CLEAR',\n  FILTER_ADD = 'FILTER_ADD',\n  FILTER_REMOVE = 'FILTER_REMOVE',\n}\n\nexport type FilterSetter\u003cData extends object = any\u003e = (column: (ColumnInstance\u003cData\u003e \u0026 UseFiltersColumnProps\u003cData\u003e), action: FILTER_ACTIONS, values: any[]) =\u003e void;\n```\n\n---\n\n## Add-ons\nThere are currently six add-ons available:\n1. [Filterable](#filterable)\n2. [Groupable](#groupable)\n3. [Sortable](#sortable)\n3. [Expandable](#expandable)\n4. [Paginated](#paginated)\n5. [Selectable](#selectable)\n\nPlease note that add-ons are ordinal, as defined by the [react-table API](https://react-table.js.org/api//blob/master/docs/api.md), and subject to the [Rules of Hooks](https://reactjs.org/docs/hooks-rules.html).\n\n### Filterable\n[react-table hook](https://react-table.js.org/api/useFilters)\n\n[Source](./src/add-ons/with-filters.add-on.ts)\n\nEnables filtering of table. Please ensure the [Toolbar](#toolbar) component is rendered in advanced use cases.\n\n#### Parameters:\n```typescript\nimport { IdType, UseFiltersOptions } from 'react-table';\nimport { IFilterFieldProps, FilterSetter, FilterFunc } from '@relate-by-ui/relatable';\n\nexport interface IWithFiltersOptions\u003cData extends object = any\u003e extends UseFiltersOptions\u003cData\u003e {\n  defaultFilterCell?: React.FC\u003cIFilterFieldProps\u003e;\n  defaultFilterFunc?: FilterFunc\u003cData\u003e;\n  onFilterChange?: FilterSetter\u003cData\u003e;\n\n  // react-table state override https://react-table.js.org/api/useFilters\n  filters?: {id: IdType\u003cData\u003e, value: any}[];\n}\n```\n\n#### Usage\n```typescript jsx\nimport React from 'react';\nimport Relatable, {IWithFiltersOptions} from '@relate-by-ui/relatable';\n\nconst options: IWithFiltersOptions = {}\nconst FilterableTable = () =\u003e \u003cRelatable\n  columns={[]}\n  data={[]}\n  filterable={true || options}\n/\u003e\n```\n\n### Groupable\n[react-table hook](https://react-table.js.org/api/useGroupBy)\n\n[Source](./src/add-ons/with-grouping.add-on.ts)\n\nEnables grouping of table rows. Please ensure the [Toolbar](#toolbar) component is rendered in advanced use cases.\n\n#### Parameters:\n```typescript\nimport { IdType, UseGroupByOptions } from 'react-table';\nimport { ICellProps, GroupSetter } from '@relate-by-ui/relatable';\n\nexport interface IWithGroupingOptions\u003cData extends object = any\u003e extends UseGroupByOptions\u003cData\u003e {\n  defaultAggregate?: string[] | string | ((values: any[]) =\u003e any);\n  defaultAggregateCell?: React.FC\u003cICellProps\u003e;\n  onGroupChange?: GroupSetter\u003cData\u003e;\n\n  // react-table state override https://react-table.js.org/api/useGroupBy\n  groupBy?: IdType\u003cData\u003e[];\n}\n```\n\n#### Usage\n```typescript jsx\nimport React from 'react';\nimport Relatable, {IWithGroupingOptions} from '@relate-by-ui/relatable';\n\nconst options: IWithGroupingOptions = {}\nconst GroupableTable = () =\u003e \u003cRelatable\n  columns={[]}\n  data={[]}\n  groupable={true || options}\n/\u003e\n```\n\n### Sortable\n[react-table hook](https://react-table.js.org/api/useSortBy)\n\n[Source](./src/add-ons/with-sorting.add-on.ts)\n\nEnables sorting of table.\n\n#### Parameters:\n```typescript\nimport { SortingRule, UseSortByOptions } from 'react-table';\nimport {SortSetter} from '@relate-by-ui/relatable';\n\nexport interface IWithSortingOptions\u003cData extends object = any\u003e extends UseSortByOptions\u003cData\u003e {\n  onSortChange?: SortSetter\u003cData\u003e;\n\n  // react-table state override https://react-table.js.org/api/useSortBy\n  sortBy?: SortingRule\u003cData\u003e[];\n}\n```\n\n#### Usage\n```typescript jsx\nimport Relatable, {IWithSortingOptions} from '@relate-by-ui/relatable';\n\nconst options: IWithSortingOptions = {}\nconst SortableTable = () =\u003e \u003cRelatable\n  columns={[]}\n  data={[]}\n  sortable={true || options}\n/\u003e\n```\n\n### Expandable\n[react-table hook](https://react-table.js.org/api/useExpanded)\n\n[Source](./src/add-ons/with-expanded.add-on.ts)\n\nEnables expanding rows of table.\n\n#### Parameters:\n```typescript\nimport { IdType, UseExpandedOptions } from 'react-table';\nimport {ExpandSetter, IRowProps} from '@relate-by-ui/relatable';\n\nexport interface IWithExpandedOptions\u003cData extends object = any\u003e extends UseExpandedOptions\u003cData\u003e {\n  onExpandedChange?: ExpandSetter\u003cData\u003e;\n  expandedRowComponent?: React.FC\u003cIRowProps\u003e;\n\n  // react-table state override https://react-table.js.org/api/useExpanded\n  expanded?: IdType\u003cData\u003e[];\n}\n```\n\n#### Usage\n```typescript jsx\nimport Relatable, {IWithExpandedOptions} from '@relate-by-ui/relatable';\n\nconst options: IWithExpandedOptions = {}\nconst ExpandableTable = () =\u003e \u003cRelatable\n  columns={[]}\n  data={[]}\n  expandable={true || options}\n/\u003e\n```\n\n### Paginated\n[react-table hook](https://react-table.js.org/api/usePagination)\n\n[Source](./src/add-ons/with-pagination.add-on.ts)\n\nEnables pagination of table. Please ensure the [Pagination](#pagination) component is rendered in advanced use cases.\n\n#### Parameters:\n```typescript\nimport { UsePaginationOptions } from 'react-table';\nimport {PageSetter, PageSizeSetter} from '@relate-by-ui/relatable';\n\nexport interface IWithPaginationOptions\u003cData extends object = any\u003e extends UsePaginationOptions\u003cData\u003e {\n  onPageChange?: PageSetter;\n  onPageSizeChange?: PageSizeSetter;\n  pageSizeOptions?: number[];\n\n  // react-table state overrides https://react-table.js.org/api/usePagination\n  pageSize?: number;\n  pageIndex?: number;\n}\n```\n\n#### Usage\n```typescript jsx\nimport Relatable, {IWithPaginationOptions} from '@relate-by-ui/relatable';\n\nconst options: IWithPaginationOptions = {}\nconst PaginatedTable = () =\u003e \u003cRelatable\n  columns={[]}\n  data={[]}\n  paginated={true || options}\n/\u003e\n```\n\n### Selectable\n[react-table hook](https://react-table.js.org/api/useRowSelect)\n\n[Source](./src/add-ons/with-selection.add-on.ts)\n\nEnables selection of table rows. Please ensure the [Toolbar](#toolbar) component is rendered in advanced use cases.\n\n#### Parameters:\n```typescript\nimport { UseRowSelectOptions } from 'react-table';\nimport { SelectSetter } from '@relate-by-ui/relatable';\n\nexport interface IWithSelectionOptions\u003cData extends object = any\u003e extends UseRowSelectOptions\u003cData\u003e {\n  onSelectionChange?: SelectSetter\u003cData\u003e;\n\n  // react-table state override https://react-table.js.org/api/useRowSelect\n  selectedRowPaths?: {[id: string]: boolean};\n}\n```\n\n#### Usage\n```typescript jsx\nimport Relatable, {IWithSelectionOptions} from '@relate-by-ui/relatable';\n\nconst options: IWithSelectionOptions = {}\nconst SelectableTable = () =\u003e \u003cRelatable\n  columns={[]}\n  data={[]}\n  paginated={true || options}\n/\u003e\n```\n\n---\n\n## Further Enhancements\n\n### Cell Renderers\nThe react-table API allows you to specify custom [Cells](https://react-table.js.org/api/column-options), [Aggregates](https://react-table.js.org/api/column-options-3), and [Filters](https://react-table.js.org/api/column-options-2) for columns.\nAs a courtesy this library provides some standard components for this purpose.\nYou can create your own simply by copying the implementation.\n\n#### Cell values\n- [TextCell](./src/components/renderers/cells/text-cell.tsx)\n- [DateCell](./src/components/renderers/cells/date-cell.tsx)\n- [NumberCell](./src/components/renderers/cells/number-cell.tsx)\n- [JSONCell](./src/components/renderers/cells/json-cell.tsx)\n\n#### Aggregate cell values\n- [ValueAggregate](src/components/renderers/aggregates/value-aggregate.tsx)\n\n#### Column filter fields\n- [TextFilter](src/components/renderers/filters/text-filter.tsx)\n\n### Toolbar Items\nAs a courtesy this library provides some standard components for enabling add-on interactions.\nYou can create your own simply by copying the implementation.\n- [GroupableToolbar](./src/components/toolbar/groupable.toolbar.tsx)\n- [FilterableToolbar](./src/components/toolbar/filterable.toolbar.tsx)\n- [SortableToolbar](./src/components/toolbar/sortable.toolbar.tsx)\n- [SelectableToolbar](./src/components/toolbar/selectable.toolbar.tsx)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fneo4j-devtools%2Frelatable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fneo4j-devtools%2Frelatable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fneo4j-devtools%2Frelatable/lists"}