{"id":21018948,"url":"https://github.com/reactabular/column-extensions","last_synced_at":"2025-05-15T06:31:56.389Z","repository":{"id":57348056,"uuid":"78203793","full_name":"reactabular/column-extensions","owner":"reactabular","description":"Column extensions for Reactabular (MIT)","archived":false,"fork":false,"pushed_at":"2017-11-13T06:27:40.000Z","size":30,"stargazers_count":1,"open_issues_count":1,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-18T19:29:02.368Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/reactabular-column-extensions","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/reactabular.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-01-06T12:16:43.000Z","updated_at":"2017-04-11T20:28:37.000Z","dependencies_parsed_at":"2022-08-28T03:01:50.895Z","dependency_job_id":null,"html_url":"https://github.com/reactabular/column-extensions","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactabular%2Fcolumn-extensions","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactabular%2Fcolumn-extensions/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactabular%2Fcolumn-extensions/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactabular%2Fcolumn-extensions/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/reactabular","download_url":"https://codeload.github.com/reactabular/column-extensions/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254288325,"owners_count":22045881,"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-19T10:28:18.280Z","updated_at":"2025-05-15T06:31:54.456Z","avatar_url":"https://github.com/reactabular.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![build status](https://secure.travis-ci.org/reactabular/column-extensions.svg)](http://travis-ci.org/reactabular/column-extensions) [![bitHound Score](https://www.bithound.io/github/reactabular/column-extensions/badges/score.svg)](https://www.bithound.io/github/reactabular/column-extensions) [![codecov](https://codecov.io/gh/reactabular/column-extensions/branch/master/graph/badge.svg)](https://codecov.io/gh/reactabular/column-extensions)\n\n# reactabular-column-extensions - Syntax extensions for Reactabular\n\n*reactabular-column-extensions* provide syntax extensions for Reactabular column definition. Instead of typing out import and the related code, this takes some of that work away. You still have to connect the data processing portion, though.\n\n## API\n\nThe API provides a **bind** function that merges the given **extensions** together with the provided column definition.\n\n```javascript\nimport * as extensions from 'reactabular-column-extensions';\n\n// Or you can cherry-pick\nimport { bind } from 'sortabular';\nimport { bind as bindExtensions } from 'sortabular';\n```\n\n### Binding\n\n**`extensions.bind([\u003cextension\u003e]) =\u003e ([\u003ccolumn\u003e]) =\u003e [\u003cadjusted column\u003e]`**\n\nThe binder accepts an array of extensions and a column definition. It adjusts the columns based on this information and merges the configuration emitted by extensions top to bottom.\n\nAn extension has to be an object like this:\n\n```javascript\n{\n  match(column) {\n    // If a column has `demo` property set, evaluate and merge\n    return column.demo;\n  },\n  evaluate(column) {\n    // Emit a structure to attach to the column definition\n    return {\n      demo: true\n    }\n  }\n}\n```\n\n\u003e If you want to implement a custom extension, you can wrap the object to a function and set defaults there.\n\n### Extensions\n\n**`extensions.draggableHeader({ onMoveColumns: \u003cfunction\u003e }) =\u003e \u003cextension\u003e`**\n\n`draggableHeader` injects the configuration expected by `reactabular-dnd` if `header.draggable` is set. You still have to configure the rest, though.\n\n**`extensions.highlightCell() =\u003e \u003cextension\u003e`**\n\n`highlightCell` injects the configuration expected by highlighting functionality from `searchtabular` if `cell.highlight` is set. You have to connect the highlighting logic with your data processing to make this work.\n\n**`extensions.resizableHeader({ window, onDragColumnStart, onDragColumn, onDragColumnEnd, props }) =\u003e \u003cextension\u003e`**\n\n`resizableHeader` injects the configuration required for resizable headers if `header.resizable` is set. It accepts `window` so you can make resizing work in an iframe. Most often you don't need to touch the parameter, though. You should define `onDragColumn(width, { column }` handler and deal with the new width there. `reactabular-resizable` can be useful for that purpose. `props` allow you to inject custom styling/props to `resizable.column`.\n\n**`extensions.sortableHeader({ sortingColumns, onSort, props, strategy }) =\u003e \u003cextension\u003e`**\n\n`sortableHeader` is a light wrapper to `sortabular` that gets injected if `header.sortable` is set. It sets logic and user interface needed for altering sorting state. It also injects sort reset transform. `sortingColumns`, `onSort(sortingColumns)`, `props`, and `strategy` follow `sortabular` interface. `props` allow you to customize styling/props of `sortabular.sort`.\n\n**`extensions.toggleChildrenCell({ idField, parentField, onToggleShowingChildren, props, rows }) =\u003e \u003cextension\u003e`**\n\n`toggleChildrenCell` gets injected if `cell.toggleChildren` is set. It has been designed to work with nested tree data of `treetabular`. It allows you to customize tree `idField` and `parentField`. In addition you have to define what happens when children are toggled using `onToggleShowingChildren(rowIndex)`. If you want to customize `treetabular.toggleChildren`, you can pass `props` to it. The extension also expects you to pass the rows of your application to it.\n\n## Column Extension Example\n\nThe example below shows how the transformation works.\n\n**Example:**\n\n```jsx\n/*\nimport * as extensions from 'reactabular-column-extensions';\n*/\n\nconst columns = [\n  {\n    property: 'color',\n    header: {\n      label: 'Color',\n      draggable: true\n    }\n  },\n  {\n    property: 'name',\n    header: {\n      label: 'Name'\n    },\n    cell: {\n      highlight: true\n    }\n  }\n];\n\nconst extendedColumns = extensions.bind([\n  extensions.draggableHeader({\n    onMoveColumns: () =\u003e ({})\n  }),\n  extensions.highlightCell()\n])(columns);\n\n\u003cul\u003e{\n  (extendedColumns).map((d, i) =\u003e\n    \u003cli key={`value-${i}`}\u003e{JSON.stringify(d, null, 2)}\u003c/li\u003e\n  )\n}\u003c/ul\u003e\n```\n\n## License\n\nMIT.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freactabular%2Fcolumn-extensions","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freactabular%2Fcolumn-extensions","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freactabular%2Fcolumn-extensions/lists"}