React Table - React table component with useful functions

Last update: Jun 22, 2022

rc-table

React table component with useful functions.

NPM version dumi build status Test coverage Dependencies DevDependencies npm download bundle size

install

rc-table

Development

npm install
npm start

Example

https://table.react-component.now.sh/

Usage

Delete, }, ]; const data = [ { name: 'Jack', age: 28, address: 'some where', key: '1' }, { name: 'Rose', age: 36, address: 'some where', key: '2' }, ]; React.render(, mountNode);">
import Table from 'rc-table';

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    width: 100,
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
    width: 100,
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
    width: 200,
  },
  {
    title: 'Operations',
    dataIndex: '',
    key: 'operations',
    render: () => <a href="#">Delete</a>,
  },
];

const data = [
  { name: 'Jack', age: 28, address: 'some where', key: '1' },
  { name: 'Rose', age: 36, address: 'some where', key: '2' },
];

React.render(<Table columns={columns} data={data} />, mountNode);

API

Properties

Name Type Default Description
tableLayout auto | fixed auto | fixed for any columns is fixed or ellipsis or header is fixed https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout
prefixCls String rc-table
className String additional className
id String identifier of the container div
useFixedHeader Boolean false whether use separator table for header. better set width for columns
scroll Object {x: false, y: false} whether table can be scroll in x/y direction, x or y can be a number that indicated the width and height of table body
expandable Object Config expand props
expandable.defaultExpandAllRows Boolean false Expand All Rows initially
expandable.defaultExpandedRowKeys String[] [] initial expanded rows keys
expandable.expandedRowKeys String[] current expanded rows keys
expandable.expandedRowRender Function(recode, index, indent, expanded):ReactNode Content render to expanded row
expandable.expandedRowClassName Function(recode, index, indent):string get expanded row's className
expandable.expandRowByClick boolean Support expand by click row
expandable.expandIconColumnIndex Number 0 The index of expandIcon which column will be inserted when expandIconAsCell is false
expandable.expandIcon props => ReactNode Customize expand icon
expandable.indentSize Number 15 indentSize for every level of data.i.children, better using with column.width specified
expandable.rowExpandable (record) => boolean Config row support expandable
expandable.onExpand Function(expanded, record) function to call when click expand icon
expandable.onExpandedRowsChange Function(expandedRows) function to call when the expanded rows change
expandable.fixed String | Boolean - this expand icon will be fixed when table scroll horizontally: true or left or right and expandIconColumnIndex need to stay first or last
rowKey string or Function(record, index):string 'key' If rowKey is string, record[rowKey] will be used as key. If rowKey is function, the return value of rowKey(record, index) will be use as key.
rowClassName string or Function(record, index, indent):string get row's className
rowRef Function(record, index, indent):string get row's ref key
data Object[] data record array to be rendered
onRow Function(record, index) Set custom props per each row.
onHeaderRow Function(record, index) Set custom props per each header row.
showHeader Boolean true whether table head is shown
title Function(currentData) table title render function
footer Function(currentData) table footer render function
emptyText React.Node or Function No Data Display text when data is empty
columns Object[] The columns config of table, see table below
components Object Override table elements, see #171 for more details
sticky boolean | {offsetHeader?: number, offsetScroll?: number, getContainer?: () => Window | HTMLElement } false stick header and scroll bar

Column Props

Name Type Default Description
key String key of this column
className String className of this column
colSpan Number thead colSpan of this column
title React Node title of this column
dataIndex String display field of the data record
width String | Number width of the specific proportion calculation according to the width of the columns
fixed String | Boolean this column will be fixed when table scroll horizontally: true or 'left' or 'right'
align String specify how cell content is aligned
ellipsis Boolean specify whether cell content be ellipsized
onCell Function(record, index) Set custom props per each cell.
onHeaderCell Function(record) Set custom props per each header cell.
render Function(value, row, index) The render function of cell, has three params: the text of this cell, the record of this row, the index of this row, it's return an object:{ children: value, props: { colSpan: 1, rowSpan:1 } } ==> 'children' is the text of this cell, props is some setting of this cell, eg: 'colspan' set td colspan, 'rowspan' set td rowspan

License

rc-table is released under the MIT license.

GitHub

https://github.com/react-component/table
Comments
  • 1. feat: ability to make table summary fixed row like table header

    close ant-design/ant-design#25116 close ant-design/ant-design#23170 close ant-design/ant-design#5710 close ant-design/ant-design#14795

    New table features: Now, summary supports specifying as an object, the render attribute renders summary, fixed specifies whether summary needs to be fixed, position attribute specifies the rendering position of summary, supports top and bottom.

    Before:

    ant-table-summary-before

    Now we can make the summary fixed by specifying fixed:

    ant-table-summary-after

    Reviewed by kingmui at 2020-07-03 09:39
  • 2. New table

    Valuable Preview

    • https://table-git-new-table.react-component.now.sh/?selectedKind=rc-table&selectedStory=animation&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel
    • https://table-git-new-table.react-component.now.sh/?selectedKind=rc-table&selectedStory=childrenIndent&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel
    • https://table-git-new-table.react-component.now.sh/?selectedKind=rc-table&selectedStory=expandedRowRender&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel
    • https://table-git-new-table.react-component.now.sh/?selectedKind=rc-table&selectedStory=fixedColumnsAndHeader&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel
    • https://table-git-new-table.react-component.now.sh/?selectedKind=rc-table&selectedStory=title-and-footer&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel
    Reviewed by zombieJ at 2019-10-28 08:00
  • 3. 扁平化rows, 新增NewBodyRow, 以支持树形结构的虚拟滚动.

    • Start Date: 2021-6-1

    Summary

    将WrapperComponent下的rows扁平化, 以支持树形结构的虚拟滚动. 因为怕牵扯到其他的东西 / 冲突, 我新建了一个NewBodyRow.tsx, 相比于 BodyRow 少了 NestRowNode.

    Motivation

    以前BodyRow是按递归来处理树形表格, components的wrapper接收到的children (也就是WrapperComponent下的rows) 是未经过扁平化处理的, 这样会使实现树形表格的虚拟滚动困难很多.

    这个功能的改造 可以使树形表格的虚拟滚动的实现 变得简单很多. (具体参考例子 rc-table 的 virtual-tree-table)

    Detailed design

    具体参考例子 rc-table 的 virtual-tree-table.

    Reviewed by crawler-django at 2021-05-24 06:38
  • 4. feat: Fixed Summary columns

    Follow up of #503

    close #503 close ant-design/ant-design#25116 ref ant-design/ant-design#23170 ref ant-design/ant-design#5710 ref ant-design/ant-design#14795

    👁 Preview

    • https://table-git-fix-summary-react-component.vercel.app/demo/fixed-columns
    • https://table-git-fix-summary-react-component.vercel.app/demo/sticky-header-and-summary
    Reviewed by zombieJ at 2021-05-21 02:42
  • 5. Access nested properties with dataIndex

    Have you considered using something like https://github.com/mariocasciaro/object-path to parse dataIndex?

    const data = [{
      name: "John", 
      age: 25 , 
      custom: {
        one: 1, 
        two: 2
      }
    }]
    
    const columns = [{
      title: "Name",
      dataIndex: "name"
    }, {
      title: "Age",
      dataIndex: "age"
    }, {
      title: "My custom property one",
      dataIndex: "custom.one"
    }, {
      title: "My custom property two",
      dataIndex: "custom.two"
    }]
    

    | Name | Age | My custom property one | My custom property two | | --- | --- | --- | --- | | John | 25 | 1 | 2 |

    Reviewed by queimadus at 2016-05-10 14:55
  • 6. feat: Table summary support fixed column

    summary 新增一种数据格式,用于支持固定列的展示:

    <Table
      {...props}
      summary={() => (
        <tr>
          <Table.SummaryCell index={0} colSpan={2}>
            Light
          </Table.SummaryCell>
          <Table.SummaryCell index={2}>Bamboo</Table.SummaryCell>
        </tr>
      )}
    />
    

    preview: https://table-git-fixed.react-component.now.sh/iframe.html?id=rc-table--fixedcolumns


    原:

    <Table
      {...props}
      summary={() => [
        [
          { children: 'Light', props: { colSpan: 2 } },
          { children: 'Hidden', props: { colSpan: 0 } },
          { children: 'Bamboo' },
        ],
      ]}
    />
    
    Reviewed by zombieJ at 2020-04-25 14:40
  • 7. Use ResizeObserver for dimension syncing

    用 ResizeObserver 来同步固定列高度和固定表头宽度。

    Fix ant-design/ant-design#14859 Fix https://github.com/ant-design/ant-design/issues/14995 Fix https://github.com/ant-design/ant-design/issues/14967 Close https://github.com/ant-design/ant-design/issues/11822

    Reviewed by yesmeck at 2019-02-19 10:42
  • 8. Elements overriding

    This PR addresses many long living issues.

    Added components to allow overriding default table elements.

    const components = {
      table: MyTable,
      header: {
        wrapper: HeaderWrapper,
        row: HeaderRow,
        cell: HeaderCell,
      },
      body: {
        wrapper: BodyWrapper,
        row: BodyRow,
        cell: BodyCell,
      },
    };
    
    <Table components={components} columns={columns data={data}}  />
    

    Added onRow, onHeaderRow, column[onCell] and column[onHeaderCell] to allow overriding row and cell props.

    Integrate with react-dnd

    See https://yesmeck.github.io/table/examples/react-dnd.html

    Close https://github.com/ant-design/ant-design/issues/4639, #83

    Integrate with styled-components

    See https://yesmeck.github.io/table/examples/styled-components.html.

    Ability to add any event listener to the table element with onRow and onCell

    Don't need add tons of onRowXXX props.

    const onRow = (record) => ({
      onClick() { alert(`Clicked ${record.name}`) },
    });
    <Table columns={columns} data={data} onRow={onRow} />
    

    Close https://github.com/ant-design/ant-design/issues/7096, #127, #141, #117, #149

    Ability to optimize table row with sCU

    class OptimizedRow extends React.Component {
      shouldComponentUpdate(nextProps) {
        // Perform a custom check
      }
    
      render() {
        return (
          <tr {...this.props } />
        )
      }
    }
    
    <Table components={{ body: { row: OptimizedRow } }} />
    

    Related https://github.com/ant-design/ant-design/issues/2884

    Others

    Close https://github.com/ant-design/ant-design/issues/5776, #139

    Reviewed by yesmeck at 2017-10-25 02:51
  • 9. 改用 div 实现

    现在比较麻烦的地方就是目前因为是用 table 标签实现的,所以 fixed column 的实现比较 tricky。然后导致一些功能比较难实现,比如 #83,然后 fixed column 跟其他功能同时使用的时候也很容易有 bug,比如 https://github.com/ant-design/ant-design/issues/3096 https://github.com/ant-design/ant-design/issues/3190 。

    @afc163 觉得怎么样?

    Reviewed by yesmeck at 2016-10-12 11:12
  • 10. fix: table emptynode fixed display

    修复表格空状态时 emptynode 未固定显示的问题

    7.20.2之前,这里的传值是模糊的 image

    7.20.2之后,在 https://github.com/react-component/table/blob/b973d405b9e2552e41c3fccc992da1362b8622d4/src/Body/ExpandedRow.tsx#L33 改成了始终使用 ExpandedRowContext 中的 fixColumn,空状态时 fixColumnfalse,就造成了显示上的问题

    Reviewed by hemengke1997 at 2022-01-06 02:10
  • 11. add onHeaderClick on column properties

    In out product document, product manager require a feature that is: when user click table header, system popup a modal dialog which explain that specific column is how generated. Thus, I think we need a event listener function pass to the "th" element.

    Reviewed by ds3783 at 2017-02-25 05:04
  • 12. 修复了设置direction为rtl时表格右边框消失 和 改变窗口大小时class rc-table-ping-left/right未及时清除的bug

    设置列宽和scroll.x,并且设置direction为rtl,表格右边框消失了 代码: image bug如图: image ————————————分割线————————————— 窗口缩小后 table-content会添加class [rc-table-ping-left,但是窗口变大后这class会一直残留(antd-table有个issue应该就是同一个原因) image

    Reviewed by horseson2018 at 2022-06-22 11:41
  • 13. chore(deps-dev): bump eslint from 7.32.0 to 8.18.0

    Bumps eslint from 7.32.0 to 8.18.0.

    Release notes

    Sourced from eslint's releases.

    v8.18.0

    Features

    • a6273b8 feat: account for rule creation time in performance reports (#15982) (Nitin Kumar)

    Bug Fixes

    • f364d47 fix: Make no-unused-vars treat for..of loops same as for..in loops (#15868) (Alex Bass)

    Documentation

    • 4871047 docs: Update analytics, canonical URL, ads (#15996) (Nicholas C. Zakas)
    • cddad14 docs: Add correct/incorrect containers (#15998) (Nicholas C. Zakas)
    • b04bc6f docs: Add rules meta info to rule pages (#15902) (Nicholas C. Zakas)
    • 1324f10 docs: unify the wording referring to optional exception (#15893) (Abdelrahman Elkady)
    • ad54d02 docs: add missing trailing slash to some internal links (#15991) (Milos Djermanovic)
    • df7768e docs: Switch to version-relative URLs (#15978) (Nicholas C. Zakas)
    • 21d6479 docs: change some absolute links to relative (#15970) (Milos Djermanovic)
    • f31216a docs: Update README team and sponsors (ESLint Jenkins)

    Build Related

    • ed49f15 build: remove unwanted parallel and image-min for dev server (#15986) (Strek)

    Chores

    • f6e2e63 chore: fix 'replaced by' rule list (#16007) (Milos Djermanovic)
    • d94dc84 chore: remove unused deprecation warnings (#15994) (Francesco Trotta)
    • cdcf11e chore: fix versions link (#15995) (Milos Djermanovic)
    • d2a8715 chore: add trailing slash to pathPrefix (#15993) (Milos Djermanovic)
    • 58a1bf0 chore: tweak URL rewriting for local previews (#15992) (Milos Djermanovic)
    • 80404d2 chore: remove docs deploy workflow (#15984) (Nicholas C. Zakas)
    • 71bc750 chore: Set permissions for GitHub actions (#15971) (Naveen)
    • 90ff647 chore: avoid generating subdirectories for each page on new docs site (#15967) (Milos Djermanovic)

    v8.17.0

    Features

    • 55319e1 feat: fix indent bug with semicolon-first style (#15951) (Milos Djermanovic)
    • f6d7920 feat: add allowNamedExports option to no-use-before-define (#15953) (Milos Djermanovic)

    Bug Fixes

    Documentation

    • b915018 docs: Update website UI to latest (#15944) (Nicholas C. Zakas)
    • f0bb609 docs: Update Exponentiation operator MDN link (#15960) (Pranjal Jain)
    • baa0153 docs: Use correct past tense "left" instead of "leaved" (#15950) (Frederik Braun)
    • 1351a9b docs: Add Resources section to rule pages (#15901) (Nicholas C. Zakas)
    • 68cf0fb docs: cleanup typos (#15936) (Nick Schonning)
    • 13b62ae docs: use-dart-sass instead of node-sass (#15912) (Deepshika S)
    • c81c5d6 docs: add social media links (#15920) (Deepshika S)
    • 0d6a50b docs: fix openjs link (#15917) (Amaresh S M)
    • 54910f5 docs: display version in mobile view (#15909) (Amaresh S M)

    ... (truncated)

    Changelog

    Sourced from eslint's changelog.

    v8.18.0 - June 17, 2022

    • f6e2e63 chore: fix 'replaced by' rule list (#16007) (Milos Djermanovic)
    • ed49f15 build: remove unwanted parallel and image-min for dev server (#15986) (Strek)
    • 4871047 docs: Update analytics, canonical URL, ads (#15996) (Nicholas C. Zakas)
    • d94dc84 chore: remove unused deprecation warnings (#15994) (Francesco Trotta)
    • a6273b8 feat: account for rule creation time in performance reports (#15982) (Nitin Kumar)
    • cddad14 docs: Add correct/incorrect containers (#15998) (Nicholas C. Zakas)
    • b04bc6f docs: Add rules meta info to rule pages (#15902) (Nicholas C. Zakas)
    • f364d47 fix: Make no-unused-vars treat for..of loops same as for..in loops (#15868) (Alex Bass)
    • 1324f10 docs: unify the wording referring to optional exception (#15893) (Abdelrahman Elkady)
    • cdcf11e chore: fix versions link (#15995) (Milos Djermanovic)
    • d2a8715 chore: add trailing slash to pathPrefix (#15993) (Milos Djermanovic)
    • 58a1bf0 chore: tweak URL rewriting for local previews (#15992) (Milos Djermanovic)
    • ad54d02 docs: add missing trailing slash to some internal links (#15991) (Milos Djermanovic)
    • 80404d2 chore: remove docs deploy workflow (#15984) (Nicholas C. Zakas)
    • df7768e docs: Switch to version-relative URLs (#15978) (Nicholas C. Zakas)
    • 71bc750 chore: Set permissions for GitHub actions (#15971) (Naveen)
    • 90ff647 chore: avoid generating subdirectories for each page on new docs site (#15967) (Milos Djermanovic)
    • 21d6479 docs: change some absolute links to relative (#15970) (Milos Djermanovic)
    • f31216a docs: Update README team and sponsors (ESLint Jenkins)

    v8.17.0 - June 3, 2022

    • b915018 docs: Update website UI to latest (#15944) (Nicholas C. Zakas)
    • 55319e1 feat: fix indent bug with semicolon-first style (#15951) (Milos Djermanovic)
    • f6d7920 feat: add allowNamedExports option to no-use-before-define (#15953) (Milos Djermanovic)
    • f0bb609 docs: Update Exponentiation operator MDN link (#15960) (Pranjal Jain)
    • da694b9 chore: avoid theme flashes (#15927) (Strek)
    • baa0153 docs: Use correct past tense "left" instead of "leaved" (#15950) (Frederik Braun)
    • f836743 chore: Use build hook for docs deploy (#15945) (Nicholas C. Zakas)
    • ce035e5 test: cleanup typos (#15937) (Nick Schonning)
    • 1351a9b docs: Add Resources section to rule pages (#15901) (Nicholas C. Zakas)
    • 68cf0fb docs: cleanup typos (#15936) (Nick Schonning)
    • 54c0953 fix: cleanup typos (#15939) (Nick Schonning)
    • 845a7af fix: typo ocatal -> octal (#15940) (Nick Schonning)
    • 10249ad chore: use addEventListener instead of addListener (#15923) (Amaresh S M)
    • 5f5c1fb chore: lint eleventy config file (#15904) (Milos Djermanovic)
    • 8513d37 chore: update Rule typedefs (#15915) (Milos Djermanovic)
    • 13b62ae docs: use-dart-sass instead of node-sass (#15912) (Deepshika S)
    • c81c5d6 docs: add social media links (#15920) (Deepshika S)
    • 0d6a50b docs: fix openjs link (#15917) (Amaresh S M)
    • 54910f5 docs: display version in mobile view (#15909) (Amaresh S M)
    • 55534f1 test: ensure no-restricted-imports works with NodeJS imports (#15907) (Nick Mazuk)

    v8.16.0 - May 20, 2022

    • 1768d0d chore: upgrade @​eslint/eslintrc@​1.3.0 (#15903) (Milos Djermanovic)
    • 050d5f4 docs: Static further reading links (#15890) (Nicholas C. Zakas)
    • cab0c22 feat: add Unicode flag suggestion in no-misleading-character-class (#15867) (Milos Djermanovic)

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    Reviewed by dependabot[bot] at 2022-06-17 21:40
  • 14. chore(deps-dev): bump @types/react from 17.0.47 to 18.0.14

    Bumps @types/react from 17.0.47 to 18.0.14.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    Reviewed by dependabot[bot] at 2022-06-16 21:49
  • 15. Do not call hooks inside

    I upgraded antd to v4.21.0, it used rc-table 7.24.0. when I move mouse into table, the page crash and show 'Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement.' image

    Reviewed by BarryHoa at 2022-06-09 09:02
  • 16. chore(deps-dev): bump less from 3.13.1 to 4.1.3

    Bumps less from 3.13.1 to 4.1.3.

    Release notes

    Sourced from less's releases.

    v4.1.2

    • #3602 Fix currentFileInfo and index properties on nodes
    • #3626 Fix IfStatement requires double parentheses when dividing closed #3616

    v4.1.1

    • Bug fixes

    v4.1.0

    Mixin parentheses requirement removed

    This was maybe too big a change without some kind of deprecation or conversion. So for this version, this works again:

    .mixin;
    

    v4.0.0

    This release has 2 breaking changes:

    Parentheses required for mixin calls

    This aligns it with syntax for calling detached rulesets.

    Example

    .mixin() {}
    .mixin;  // error in 4.0
    

    Parens-division now the default math setting

    Parentheses are required (by default) around division-like expressions, to force math evaluation.

    Example:

    @ratio_large: 16;
    @ratio_small: 9;
    

    /** The following will produce device-aspect-ratio: 1.77777778 by default in 3.x */ @​media all and (device-aspect-ratio: @​ratio_large / @​ratio_small) { .body { max-width: 800px; } }

    Produces:

    @media all and (device-aspect-ratio: 16 / 9) {
      .body {
        max-width: 800px;
      }
    }
    </tr></table> 
    

    ... (truncated)

    Changelog

    Sourced from less's changelog.

    Change Log

    v4.1.2 (2021-10-04)

    v4.1.1 (2021-01-31)

    v4.1.0 (2021-01-10)

    v4.0.0 (2020-12-18)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    Reviewed by dependabot[bot] at 2022-06-08 21:29
  • 17. Fix shadows still shown after resize to fullscreen

    When you:

    • have rendered a table that fits on your screen
    • you resize the view so that the scrollbar appears and the shadows on the table
    • you go back to the original size of the screen

    What happens The shadows are still there

    What should happen The shadows are gone since there's no longer a scrollbar, nor a need to scroll

    This is because the code is jumping out of the function when the scrollwidth and clientwidth are the same, but it doesn't reset the pingedLeft and pingedRight values.

    Reviewed by xPhentom at 2022-06-08 20:53
Related tags
Ready-to-use-in-SPA table, based on react-bootstrap Table component.
Ready-to-use-in-SPA table, based on react-bootstrap Table component.

@vlsergey/react-bootstrap-pagetable Ready-to-use-in-SPA table component Goal of this component is provide standard and simple-to-use component to disp

Jan 12, 2022
react-collapsing-table: a React rewrite of the jQuery table plugin from

React Collapsing Table Thanks for taking a look at the react collapsing table. This was inspired by the the jquery datatables library. You can see a w

Jun 10, 2022
react-super-responsive-table converts your table data to a user-friendly list in mobile view.
react-super-responsive-table converts your table data to a user-friendly list in mobile view.

react-super-responsive-table react-super-responsive-table converts your table data to a user-friendly list in mobile view. Demo Installation Usage Usi

Jun 24, 2022
A set of table factory decorators to easily implement table components inside user projects.

react-table-factory A set of table factory decorators to easily implement table components inside user projects. Demo table HoC A HoC to implement tab

Jul 10, 2020
react-xls is the fastest in-browser excel ( .xls & .xlsx ) parser for React. It is full of useful features such as useExcelDownloader, ... etc.
react-xls is the fastest in-browser excel ( .xls & .xlsx ) parser for React. It is full of useful features such as useExcelDownloader, ... etc.

react-xls react-xls is the fastest in-browser excel ( .xls & .xlsx ) parser for React. ?? Features Compatible with both JavaScript and TypeScript ?? U

Jun 19, 2022
Useful Grid/Hidden algorithm from Material-UI

React Fast Grid (+ Hidden) Demo Useful algorithm extracted from Material-UI Grid and Material-UI Hidden npm install react-fast-grid IE11 Comptability

Oct 28, 2020
Lightweight MIT React Table component with Sorting, Filtering, Grouping, Virtualization, Editing and many more
Lightweight MIT React Table component with Sorting, Filtering, Grouping, Virtualization, Editing and many more

The customizable, extendable, lightweight and free React Table Component Site | Demos | Docs Demo link Installation npm npm install ka-table yarn yarn

Jun 11, 2022
A React table component.
A React table component.

rsuite-table A React table component. Features Support virtualized. Support fixed header, fixed column. Support custom adjustment column width. Suppor

Jun 19, 2022
BaseTable is a react table component to display large datasets with high performance and flexibility
BaseTable is a react table component to display large datasets with high performance and flexibility

A react table component to display large datasets with high performance and flexibility

Jun 19, 2022
React Table component
React Table component

react-table React Table Demo: https://trendmicro-frontend.github.io/react-table Version 1.x is no longer maintained by 2019/12/06 [Friendly reminder]

Sep 3, 2021
A react table component to display large datasets with high performance and flexibility
A react table component to display large datasets with high performance and flexibility

react-base-table BaseTable is a react table component to display large datasets with high performance and flexibility Install # npm npm install react-

Jun 19, 2022
A react table component with fucking difficult features
A react table component with fucking difficult features

Fucking React Table A react table component with fucking difficult features, including Virtualized rows with fucking native table elements Sticky head

Apr 1, 2022
@o2xp/react-datatable is a modulable component to render data in a table with some nice features !

@o2xp/react-datatable @o2xp/react-datatable is a modulable component to render data in a table with some nice features ! See a show case just here. Ta

Jul 21, 2021
Simple data-table component with React
Simple data-table component with React

React Table It Data table component with React Demo Installation $ npm i @emp/reactable or $ yarn add @emp/reactable Usage import Table from '@empd/re

Nov 17, 2020
A React table component designed to allow presenting millions of rows of data.

Fixed Data Table 2 for React · Fixed-Data-Table-2 is a continuation of facebook/fixed-data-table. The original repo is no longer maintained and has ma

Jun 22, 2022
Table Component based on React

uxcore-table Table UI Component based on React. working for many modes such as sub table, tree table and inline editing table. How to run $ git clone

Aug 19, 2020
A react table UI component.

React Table Component Introduction A react table UI component. Demo View Demo Usage npm install @kavience/react-table Easy use import React from 'rea

Dec 17, 2021
Custom react-table-component / Storybook User Guide
Custom react-table-component / Storybook User Guide

Custom react-table-component / Storybook User Guide react-table-component is bas

Mar 9, 2022
Infinite Table for React is a UI component for data virtualization.

Infinite Table huge datasets are no longer a problem Table Of Contents Installation Documentation ❤️ TypeScript ?? Themable Testing License Installati

Jun 14, 2022