{"id":24755179,"url":"https://github.com/gravity-ui/react-data-table","last_synced_at":"2025-07-23T11:37:50.880Z","repository":{"id":43063009,"uuid":"433751058","full_name":"gravity-ui/react-data-table","owner":"gravity-ui","description":null,"archived":false,"fork":false,"pushed_at":"2024-05-06T15:28:55.000Z","size":1044,"stargazers_count":6,"open_issues_count":1,"forks_count":1,"subscribers_count":8,"default_branch":"main","last_synced_at":"2024-05-30T18:15:19.526Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://preview.gravity-ui.com/react-data-table/","language":"TypeScript","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/gravity-ui.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":"AUTHORS","dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-12-01T08:53:22.000Z","updated_at":"2024-06-21T19:05:16.072Z","dependencies_parsed_at":"2024-02-12T18:27:24.612Z","dependency_job_id":"e6fc231c-e4e6-4e9c-b95e-c8300b5fdf39","html_url":"https://github.com/gravity-ui/react-data-table","commit_stats":{"total_commits":30,"total_committers":6,"mean_commits":5.0,"dds":0.5,"last_synced_commit":"a6f877a1113fb0decfd792f0692f8426d8eb856c"},"previous_names":["yandex-cloud/react-data-table"],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gravity-ui%2Freact-data-table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gravity-ui%2Freact-data-table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gravity-ui%2Freact-data-table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gravity-ui%2Freact-data-table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gravity-ui","download_url":"https://codeload.github.com/gravity-ui/react-data-table/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":236017911,"owners_count":19082001,"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":"2025-01-28T12:36:51.518Z","updated_at":"2025-07-23T11:37:50.867Z","avatar_url":"https://github.com/gravity-ui.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Data Table \u0026middot; [![npm package](https://img.shields.io/npm/v/@gravity-ui/react-data-table)](https://www.npmjs.com/package/@gravity-ui/react-data-table) [![CI](https://img.shields.io/github/actions/workflow/status/gravity-ui/react-data-table/.github/workflows/ci.yml?label=CI\u0026logo=github)](https://github.com/gravity-ui/react-data-table/actions/workflows/ci.yml?query=branch:main) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685)](https://preview.gravity-ui.com/react-data-table/)\n\nA React component for rendering tables.\n\nCell grouping is supported: rows are first sorted by grouped columns. Grouping is incompatible with the `dynamicRender` option.\n\nMulti-column sorting is also supported. Ctrl+Click on a column adds a column at the end\nof the sort list. A simple Click sorts the table by this column only. Sorting order is switched in the sequence: `none -\u003e default -\u003e reversed default -\u003e none`.\n\n## Properties\n\n| Property | Type | Required | Default | Description |\n| :---------------- | :--------- | :------: | :------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| columns | `Array` | ✓ | | List of [table columns](#Column) |\n| headerData | `Array` | | | A list of rows with data that will be shown inside the header. If the header is sticky, the rows will also stick. The same methods apply to them as to rows in `data` ([headerData](#headerData)) |\n| data | `Array` | ✓ | | List of data rows |\n| footerData | `Array` | | | A list of rows with data to be sent into the table footer. The same methods apply to them as to strings in `data` |\n| startIndex | `Number` | | `0` | Initial index (used to show row indexes) |\n| settings | `Object` | | | [Table settings](#Settings) |\n| emptyDataMessage | `String` | | 'No data' | The message shown when the data is empty |\n| renderEmptyRow | `Function` | | | A custom renderer for an empty table row, accepts an array of columns `(columns) =\u003e ReactNode` |\n| rowClassName | `Function` | | | A method that sets the class for a string `(row, index, isFooterRow, isHeaderRow) =\u003e (\u003cstring\u003e )` |\n| rowKey | `Function` | | | A method that returns the value of react-key `(row, index) =\u003e (\u003cscalar_type_value\u003e )`. The default method returns `row.id` \u0026#124;\u0026#124;` index` |\n| initialSortOrder | `Object` | | | Initial sorting in the format`{columnId: \u003cstring\u003e, order: \u003cDataTable.ASCENDING `\u0026#124;` DataTable.DESCENDING\u003e}` or a list of such objects. |\n| theme | `String` | | 'yandex-cloud' | The name of the theme. To use the built-in table theme, use the `'legacy'` value. For compatibility with @gravity-ui/uikit colors, use `'yandex-cloud'` (default) |\n| onSort | `Function` | | | Sort listener `([{columnId: \u003cstring\u003e, order: \u003cDataTable.ASCENDING `\u0026#124;` DataTable.DESCENDING\u003e}]) =\u003e void`. Use it to save the sorting state and pass it to the `initialSortOrder` on page refresh. |\n| sortOrder | `Object` | | | Sorting in the format `{columnId: \u003cstring\u003e, order: \u003cDataTable.ASCENDING `\u0026#124;` DataTable.DESCENDING\u003e}` or a list of such objects. |\n| onResize | `Function` | | | Resize listener `(columnId: string, newWidth: number) =\u003e void`. Use it to save new column width. |\n| visibleRowIndex | `Function` | | | A method `(row, index) =\u003e number` that returns the row index shown in the column enabled by the `displayIndices` flag. Use it to specify a correct row index when applying external sorting |\n| onRowClick | `Function` | | | Click listener for a row `(row, index, event) =\u003e void` |\n| nullBeforeNumbers | `Boolean` | | | A flag that sets the position of `null`/`undefined` values when sorting. If true, `null`/`undefined` values are shown at the top in the case of ascending order and at the bottom in the case of descending order. If `false`/`undefined`, they are shown at the bottom |\n| getColSpansOfRow | `Function` | | | Configuring column spanning for each row `({ row, columns, index, headerData, span, footer, odd }) =\u003e {[colName: string]: number} / undefined` |\n\n## Settings\n\n| Property | Type | Default | Description |\n| :------------------------------------------ | :----------------------------------------- | :-------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| displayIndices | `Boolean \\| {maxIndex: number}` | `true` | Whether to show row indexes (starting from `startIndex`). When set to an object with maxIndex, it controls the width of the index column based on the specified maximum index value rather than the actual data length |\n| stickyHead | `DataTable.FIXED DataTable.MOVING` | | Enable sticky header in one of two modes. The `DataTable.FIXED` mode is used if the table container is fixed relative to the page. If the page with a container is scrollable, better use `DataTable.MOVING`, but for this your browser needs to support `position: sticky`. Otherwise, sticky header will be completely disabled. |\n| stickyTop | `Number` | | Stick the header at the desired height (in the `DataTable.MOVING` mode). Use it if the scrollable container includes other content apart from the table. If the header fails to stick to the edge of the container, better use exactly positioned spacers so that the table content does not bulge out above the top of the header. |\n| stickyFooter | see stickyHead | | It's similar to `stickyHead` for `footerData` |\n| stickyBottom | `Number` | | Stick rows from `footerData` with proper bottom margin (in the `DataTable.MOVING` mode). |\n| syncHeadOnResize | `Boolean` | `false` | Sync the size of a sticky header when resizing the window |\n| dynamicInnerRef | `React.RefObject\u003cDynamicInnerRefT\u003e` | | A ref to get a ReactList instance when you want to call methods directly, for example, [ReactList.scrollTo](https://github.com/caseywebdev/react-list#scrolltoindex). `DynamicInnerRefT` is also exported as Settings to correctly define the type without adding a project-dependent ReactList. |\n| dynamicRender | `Boolean` | `false` | Dynamic rendering of rows (viewport only). Requires a specific layout |\n| dynamicRenderType | `String` | `'uniform'` | [ReactList.type](https://github.com/coderiety/react-list#type-one-of-simple-variable-or-uniform-defaults-to-simple) |\n| dynamicItemSizeEstimator | `Function` | | [ReactList.itemSizeEstimator](https://github.com/coderiety/react-list#itemsizeestimatorindex-cache) |\n| dynamicItemSizeGetter | `Function` | | [ReactList.itemSizeGetter](https://github.com/coderiety/react-list#itemsizegetterindex) |\n| dynamicRenderMinSize | `Number` | `1` | A minimum number of rows to be rendered in any case, even if a smaller number of rows fills the container height completely (this makes sense if dynamicRender is enabled). The value is passed [to the `minSize` property of the ReactList component](https://github.com/coderiety/react-list#minsize-defaults-to-1). |\n| dynamicRenderUseStaticSize | `Boolean` | `false` | [ReactList.useStaticSize](https://github.com/caseywebdev/react-list#usestaticsize-defaults-to-false) |\n| dynamicRenderThreshold | `Number` | | [ReactList.threshold](https://github.com/caseywebdev/react-list#threshold-defaults-to-100) |\n| dynamicRenderScrollParentGetter | `Function` | | [ReactList.scrollParentGetter](https://github.com/caseywebdev/react-list#scrollparentgetter-defaults-to-finding-the-nearest-scrollable-parent) |\n| dynamicRenderScrollParentViewportSizeGetter | `Function` | | [ReactList.scrollParentViewportSizeGetter](https://github.com/caseywebdev/react-list#scrollparentviewportsizegetter-defaults-to-scrollparents-viewport-size) |\n| sortable | `Boolean` | `true` | Enable sorting for the entire table |\n| externalSort | `Boolean` | `false` | Disable data sorting on the component side. [Read more](#externalSort) |\n| disableSortReset | `Boolean` | `false` | Disable sort reset (enables the `none -\u003e default \u003c-\u003e reversed default` sort scheme) |\n| defaultOrder | `DataTable.ASCENDING DataTable.DESCENDING` | `DataTable.ASCENDING` | Default sort order in the table |\n| defaultResizeable | `Boolean` | `false` | Value that is used to determine whether column is resizeable, if no explicit value for column is set |\n| highlightRows | `Boolean` | | Highlighting table rows on hover |\n| stripedRows | `Boolean` | | Whether to color even/odd rows |\n| headerMod | `multiline` `pre` | | Enable a multi-line (the `multiline` value) or pre-formatted header (the `pre` value) |\n\n### externalSort\n\nDisables data sorting on the component side. Please note that:\n\n- The table continues to be the primary source of the sort state (selected columns and sort direction) and is also responsible for the correct rendering of table headers in accordance with this state.\n- The external environment must pass to the table correctly sorted rows in `props.data` responding to the `props.onSort` callback call.\n- Grouping of column values is disabled (see [Column.group](#group)).\n\n---\n\n## Column\n\nColumns let you flexibly customize rendering of cells.\nIn its simplest form, the column description looks as follows:\n\n```json\n{\n \"name\": \"column_name\"\n}\n```\n\nThe cell will show `row.column_name` as it is.\n\nThe `name` field is the only mandatory field. The remaining fields are described below:\n\n| Property | Type | Description |\n| :------------- | :------------------------------------------------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| name | `string` | Column name and default value for the `header` and `accessor` |\n| header | `string` or `node` | Column header |\n| headerTitle | `string` | Header title |\n| className | `string` | Column class |\n| width         | `string \\| number` | Column width |\n| resizeable     | `boolean` | Determines whether column width can be changed. Applied only if `onResize` function is passed. |\n| resizeMinWidth | `number` | Min column width for resize. |\n| resizeMaxWidth | `number` | Max column width for resize. |\n| align | `DataTable.LEFT DataTable.CENTER DataTable.RIGHT` | Text alignment in a cell |\n| accessor | `func` | Callback `(row) =\u003e (value)`. Use it if you want to display deeply \"hidden\" values in the column. For example: `(row) =\u003e (row.child1.child2[0].value)` |\n| title | `string` or `func:string` | Callback `(row) =\u003e (title)`. Lets you set a fixed title (in the case of `string`) or a dynamic title for column cells. Returns a string. |\n| render | `func:node` | Callback `({value, row, index}) =\u003e (node)`. Lets you render a cell in an arbitrary way. As an input, it gets a value, a whole row, or a row index. Returns a React node. |\n| customStyle | `func` | Callback `({row, index, header, name}) =\u003e (styleObject)`. Lets you set a custom style for the cell. In the callback, you pass a string with data, an index, a column name, and a flag whether the cell is a header. At the output, you expect an object with styles following the React syntax. |\n| onClick | `func` | Callback `(row, column) =\u003e ()`. The onClick listener on the cell. |\n| sortable | `Boolean` | Whether the column is sortable. |\n| defaultOrder | `DataTable.ASCENDING DataTable.DESCENDING` | A default sorting order in the column. |\n| sortAccessor | `func` | Callback `(row) =\u003e (value)`. Use it if you want to sort by a value other than `value`, or if `value` is non-scalar. |\n| sortAscending | `func` | Callback `({row, index, span?}, {row, index, span?}) =\u003e (sortValue)`. Use if you want to customize sorting completely. |\n| sub | `array` | Nested columns |\n| group | `Boolean` | Groups the same values into one cell, allowing you to create complex tables. [More details](#group) |\n| autogroup | `Boolean` | Enables ascending sorting across all columns with group, resulting in autogrouping. Defaults to `true` |\n\n### group\n\nGroups the same values into one cell. Please note that:\n\n- Grouping is incompatible with the `Settings.dynamicRender` option, and, when they are enabled together, the table might work poorly.\n- Grouping is disabled when the `Settings.externalSort` option is enabled\n- It is worth disabling the `Settings.stripedRows` and `Settings.highlightRows` settings.\n\n---\n\n### Multi-level header\n\nNested columns are set up in the `sub` field. For columns with attachments, except for the `sub` field,\nonly fields that affect the header make sense: `name`, `header`, `headerTitle`, `align`, and `customStyle`.\n\n### headerData\n\nThe `headerData` property lets you add rows to the beginning of the table. However, if the header is sticky, the rows will stick along with the header. In the sticky header mode, such rows won't affect the column width, so you might need to specify the column width.\n\n### Customizing with themes\n\nThe table contains several customized elements.\nTo set colors for them, use CSS variables (in the example, the topic values are `internal`):\n\n```css\n--data-table-color-base: #ffffff;\n--data-table-color-stripe: rgba(0, 0, 0, 0.03);\n--data-table-border-color: #dddddd;\n--data-table-color-hover-area: #ffeba0;\n--data-table-color-footer-area: var(--data-table-color-base);\n```\n\n### Custom cell colors\n\nTable cells can be rendered using an arbitrary style. **If used incorrectly, it might break the layout!**\n\n### Using react-data-table with non-standard fonts\n\nWhen using the `stickyHead` prop and a non-standard font for table data, sizes of header columns and table columns might mismatch. This might be the issue if the table data has been loaded and the table rendered before the browser has loaded a specific font.\n\nTo avoid this problem, load the desired font before rendering the table. You can do this in one\nof the following ways:\n\n1. Use `\u003clink rel=\"preload\"\u003e` in the `\u003chead\u003e` element of your HTML code\n\n```html\n\u003chead\u003e\n \u003cmeta charset=\"utf-8\" /\u003e\n \u003ctitle\u003eWeb font example\u003c/title\u003e\n\n \u003clink\n rel=\"preload\"\n href=\"fonts/my-font.woff2\"\n as=\"font\"\n type=\"font/woff2\"\n crossorigin=\"crossorigin\"\n /\u003e\n \u003clink\n rel=\"preload\"\n href=\"fonts/my-font.woff\"\n as=\"font\"\n type=\"font/woff\"\n crossorigin=\"crossorigin\"\n /\u003e\n \u003clink\n rel=\"preload\"\n href=\"fonts/my-font.ttf\"\n as=\"font\"\n type=\"font/ttf\"\n crossorigin=\"crossorigin\"\n /\u003e\n\n \u003clink href=\"style.css\" rel=\"stylesheet\" type=\"text/css\" /\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n ...\n\u003c/body\u003e\n```\n\nPlease note that in this case, the font is loaded before all the content on the page is received and loaded. If you use this font only to render tables in your service, and tables aren't core to your service, the user will have to wait for a font they might never need again to upload. This method is also not supported by some modern browsers. Read more about this [here](https://developer.mozilla.org/ru/docs/Web/HTML/Preloading_content).\n\n2. Use the [fontfaceobserver](https://github.com/bramstein/fontfaceobserver) package\n\nTo load a font from the JS code, first define it by the @font-face directive in the CSS code:\n\n```scss\n@font-face {\n font-family: 'My font';\n src: url('fonts/my-font.woff2') format('woff2'),\n url('fonts/my-font.woff') format('woff');\n url('fonts/my-font.ttf') format('ttf');\n font-weight: 400;\n font-style: normal;\n}\n```\n\nThen you can preload the font directly with loading data for the table itself.\n\nFor one font face:\n\n```js\nimport FontFaceObserver from 'fontfaceobserver';\n\nfunction preloadTableFont() {\n return new FontFaceObserver('My font').load();\n}\n\nfunction fetchData() {\n ...\n}\n\nfunction getTableData() {\n return Promise.all([\n fetchData(),\n preloadTableFont(),\n ])\n .then([data] =\u003e {\n ...\n })\n .catch((err) =\u003e {\n ...\n })\n}\n```\n\nFor multiple font faces:\n\n```js\nimport FontFaceObserver from 'fontfaceobserver';\n\nconst lightFont = new FontFaceObserver('My font', {weight: 300});\nconst regularFont = new FontFaceObserver('My font', {weight: 400});\n\nfunction preloadTableFont() {\n return Promise.all([\n lightFont.load(),\n regularFont.load(),\n ]);\n}\n\nfunction fetchData() {\n ...\n}\n\nfunction getTableData() {\n return Promise.all([\n fetchData(),\n preloadTableFont(),\n ])\n .then([data] =\u003e {\n ...\n })\n .catch((err) =\u003e {\n ...\n })\n}\n```\n\nThis method is fully supported by browsers and lets you download the font only for users who have opened the table.\n\n### Usage\n\n```jsx harmony\nconst data = [];\nconst columns = [];\nconst startIndex = 0;\n\nreturn \u003cDataTable data={data} columns={columns} startIndex={startIndex} /\u003e;\n```\n\nFor more information, see the sample code.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgravity-ui%2Freact-data-table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgravity-ui%2Freact-data-table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgravity-ui%2Freact-data-table/lists"}