guillaumejasmin / react-table-hoc-fixed-columns Goto Github PK

When there's a horizontal scroll and you change number of rows from 5 to any of the bigger ones you get this UI issue. Moving the horizontal bar afterwards gets the issue fixed.

Image

Hi @GuillaumeJasmin ,

First of all, thanks for this amazing HOC.

The reason of this issue is that I think you should update the innerRef type to allow pass an object, due to React.createRef() API introduced in React 16.3, which generates an immutable object which we can pass as reference.

If I pass a React.createRef() object, it works without problem but gives a warning due the type:

So the update must be change the type in order to supress the warning:

From:

innerRef: PropTypes.func

To:

innerRef: PropTypes.oneOfType([
  PropTypes.func,
  PropTypes.object
]

Thanks!

Good day.

I have several fixed columns without header and I want to make a border on the last column.
I tried to override style in my .css but with no luck - nothing happens. How can I make this?

.rthfc .-filters .rt-th.rthfc-th-fixed-left-last,
.rthfc .rt-th.rthfc-th-fixed-left-last,
.rthfc .rt-td.rthfc-td-fixed-left-last {
  border-right: solid 10px black;
}

I had installed the react-table & react-table-hoc-fixed-columns but it is unable to pass this line. Unable to get the index.js file or index.d.ts (declaration file)

import withFixedColumns from 'react-table-hoc-fixed-columns';
const ReactTableFixedColumns = withFixedColumns(ReactTable);

It is throwing if I keep this line of CSS of react-table
import "react-table/react-table.css";

Unfortunately, the react-table team released a breaking change @latest which is causing any builds that include react-table-hoc-fixed-columns to completely fail.

would it be possible to update your package.json to reference a known working version of react-table until the upgrade to v7 can be completed?

npm install --save [email protected]

https://codesandbox.io/s/kowzlm5jp7?file=/index.js:281-310

please resize first column to the left to make it small
scroll left and right over the middle part of the table and view the middle part appears on the left fixed side of the table

Hi,
we are currently integrating/testing your HOC.
If filter is activated on a column the filter input does not change the width according to the column width.
Do you have an idea?

Hi, thanks for a very useful HOC. I found that sort indicator is not shown up for fixed columns.

You can see it in this demo https://guillaumejasmin.github.io/react-table-hoc-fixed-columns. When you click the header of Age or Email, there is a bar on top or bottom to indicate ascending or descending, but nothing when you click the header of First Name and Last Name.

The reason is there is a boxShadow style for the fixed columns at https://github.com/GuillaumeJasmin/react-table-hoc-fixed-columns/blob/master/src/lib/index.js#L12, which disable the indicator (also using box shadow). Not sure if that style rule is important.

My workaround is to remove the boxShadow before passing getTheadThProps to ReactTable:

const ReactTableFixedColumns = withFixedColumns(({ getTheadThProps, ...props }) => {
    const getTheadThPropsWithoutShadow = (...args) => {
        const theadThProps = getTheadThProps.apply(null, args)
        delete theadThProps.style.boxShadow
        return theadThProps
    }
    return (
        <ReactTable {...props} getTheadThProps={getTheadThPropsWithoutShadow}/>
    )
})

Hello @GuillaumeJasmin ,
i'm facing with a new issue.

How to get the problem, like in the img:

• you need to have several columns for horizontal scrolling:
• scroll to the right
• narrow down multiple columns

I have followed the installation guide and it is working with 20 errors in console.
Here i have list few of them:

1. Warning: Failed prop type: ReactTable: prop type TableComponent is invalid; it must be a function, usually from the prop-types package, but received undefined.
2. Warning: Failed prop type: ReactTable: prop type TheadComponent is invalid; it must be a function, usually from the prop-types package, but received undefined.
3. Warning: Failed prop type: ReactTable: prop type TbodyComponent is invalid; it must be a function, usually from the prop-types package, but received undefined.
   .
   .
   .
4. Warning: Failed prop type: ReactTable: prop type TheadComponent is invalid; it must be a function, usually from the prop-types package, but received undefined.

Let me know, how to get rid of those errors. For more i have attached the screenshot. Thanks

Creating overrides for the column

const columnDefaults = {
  ...ReactTableDefaults.column,
  headerClassName:
    "table__header table__header--word-wrap table__header--default",
  Cell: props => {
    const classes = {
      "text-center": true,
      "text-center": true
    };

    if (props.value === undefined) return null;
    return typeof props.value === "boolean" ? (
      <div className={mapClasses(classes)}>
        <CellBoolean value={props.value} />
      </div>
    ) : (
      <div className="text--center">{props.value}</div>
    );
  }
};

Rendering the table:

    return (
      <FixedColumnTable
        className="-striped"
        style={{ border: "none", fontSize: "0.75em" }}
        data={data}
        columns={columns}
        column={columnDefaults}
        showPagination={false}
        defaultPageSize={23}
        sortable={false}
      />
    );

Basically the column prop appears to not be doing anything, I tried it by passing the style directly like so:

      {
        Header: "eWeigh",
        accessor: "eweigh",
        headerClassName: "table__header--lighter  font--bold"
      },

This works correctly ^. So it seems trying to overwrite globally is the problem.

Am I missing something or is this a bug?

Great component. Appreciate the effort.

Your thoughts on React-Table@7 enhancement?

thanks

When running unit test cases all the test case are failing due to react-table-hoc-fixed-columns using uniqid component and there is on going issue adamhalasz/uniqid#23 which is failing the same for us as well.

`
ReferenceError: interface_key is not defined

  at Object.<anonymous> (node_modules/uniqid/index.js:21:10)
  at Object.<anonymous> (node_modules/react-table-hoc-fixed-columns/lib/stickyPosition/index.js:12:38)
  at Object.<anonymous> (node_modules/react-table-hoc-fixed-columns/lib/index.js:22:46)
  at Object.<anonymous> 

`

When i'm trying to add class for Table component. Lib stops work properly.
I did some research on sources and found this chunk of code:
if (event.nativeEvent.target.getAttribute('class') !== 'rt-table') return;
Would be better use something like this?
if (!event.nativeEvent.target.getAttribute('class').includes('rt-table')) return;
Or you have some specific reasons to do strict class checking?

So, if you have a table with columns that can be toggled visible or invisible, and the last fixed column in a group is hidden, the fixed section border is not shown.

I have an example here:
https://lplxj0jqn9.codesandbox.io/

A video of the behavior using the above example:
http://recordit.co/4EzwW89MMh

Thanks!

.ReactTable .rt-resizer has z-index: 10, and rthfc-th-fixed for rt-th should be at least 11

When group headers are not presented after resizing a column all widths of cells broke.

https://codesandbox.io/s/n7l6l5j3n0

Tested in last versions of Safari, Chrome and Firefox and everywhere it's broken.

The current implementation of creates new column instance on every render which causes performance issues

fixed columns with pivotBy and treeTable doesn't work well

When using TypeScript, I noticed that the innerRef prop type is missing in the index.d.ts file.
Is it possible to add its type anytime soon?

Cheers!

Can we make the background color optional? Perhaps add a separate prop or just rely on the user making this additional change themselves?

I cannot use my background color in getTrGroupProps. It overrides my background color and cannot scroll down in react-table-hoc-fixed-columns 2.3.3

I have a problem with react v7.1.0: Cannot read property 'defaultProps' of undefined

Link

Hey,

getting the below error on new version of react-table and this library

https://codesandbox.io/s/l3vlnz62l

Footer doesn't work in beta.8 with sticky position version.

If you use v1.0.0-beta.8, force with scroll event version:

import { withFixedColumnsScrollEvent } from 'react-table-hoc-fixed-columns'
import ReactTable from 'react-table';

const ReactTableFixedColumns = withFixedColumnsScrollEvent(ReactTable);
...
<ReactTableFixedColumns
  columns={[...]}
/>

See documentation

After migrating from 1.x to 2.x I noticed that fixed: left with more than one column is broken.

This is what I expected:

This is what I got (notice the column title Variant gets pushed over to the next column):

Until I figure out a way to patch this and get react-table and react-table-6 to co-exist, you can see this problem at https://www.pharmgkb.org/chemical/PA10026/variantAnnotation

Deleting line 136 and 151 in stickyPosition/index.js seems to fix the problem for me.

If this issue can't be resolved in a timely manner, would you be able to release a version of 1.x with the fix for #58?

Thanks.

Would it be possible to get this to work with react-table-6?

Hey! Thanks for this one, it works great!
Just trying to make some style adjustments and couldn't figure out how..
I want my scroll bars to start after the sticky header/columns. is there a way to achieve this? ty :)
example

Hi,

I am using this react-table-hoc-fixed-column to freeze certain columns. My each row in the table has inline edit (For ex. in each row, one column has dropdown).

The problem with this hoc is when I change value of any row's drop down it comes back to first page (like a fresh render).

For example I am in page 2 and i edit any row then it comes back to 1st page. Although data is being retained.

Will really appreciate any lead.

"react-table": "^6.10.3",
"react-table-hoc-fixed-columns": "^2.3.3",

[Note: my code works totally fine when I use the react-table, it doesnt come back to first page]

Hi, I found if without uniqClassName prop on ssr, following warning appears
Warning: Prop className did not match. Server: "ReactTable rthfc-5eb8ct1u9ljxd1j1kf rthfc -sp" Client: "ReactTable rthfc-jxd1j237 rthfc -sp"
and fixed header not work, after i read source code and add add uniqClassName prop, it works fine.

Could you write it on document or fixed it, thank you

Hi,
Thanks for the fixed table HOC.It is really useful.
However,I am facing issue when hiding column dynamically.
https://codesandbox.io/s/9y7oolr85p.

I have kept a button "Show/Hide column" at the bottom of the table.After clicking on the button,it hide the "Age test" column which overlaps the filter on first row.

After inspecting the element, filter div contain style top: 45px.

If i directly use the react-table, it's working fine.However while using Fixed HOC, facing this issue.
https://codesandbox.io/s/wow8omql1l

Can you please suggest me available HOC which will fix this issue.

It looks like uniqid is creating class names that start with numbers which causes a CSS selector error. Should be able to be fixed by just adding a prefix to the uniqid calls.

See the following example: https://codesandbox.io/s/react-table-gettrprops-c54nb. When I remove the getTrProps function, everything works correctly, but if I add it, everything disappears.

I can’t seem to figure out a way to configure the following style. It doesn't look possible from looking at the source, but perhaps I’m missing something.

export const border = 'solid 1px #ccc !important';

If not, perhaps I’ll fork and add this capability. Thanks!

It appears that when using footers the original Footer element does not have the proper styling applied.

The floating footer appears to not have any of the additional styling added, specifically the following items:

position: absolute;
/*height: 100%; - Causes overflow on scrolling container*/
background-color: rgb(255, 255, 255);
z-index: 3;
left: 0px;

The original footer element seems to be missing the following additional style:

visibility: hidden

With multiple tables on the same page, updateRowsPosition add offsets to consecutive header rows by their index in the page, not in their table. So the first header row of the second table has an offset but it should not.

i has installed the library few months ago and it worked fine. but when i opened my project last week until today the table cant worked. the column cant scrolled anymore

Getting following error:

react-table-hoc-fixed-columns/lib/index.js:3234
var el = document.createElement('a');
         ^
ReferenceError: document is not defined

I think you should not use styles with important.
I got an example where I cannot redefine it styles.
Native React Table has props for style configuration through field 'styles' but we can not use the style with important since this will not work

styles: { borderColor : "red!important" }

Hi,

Thank you so much for this HOC.
We are integrating it into our app. And we use React with Typescript. For TS support, I have added ambient declarations in the code. But it would be great if the types are shipped with the package itself.

Let me know your take on this. I'm happy to submit a PR.

Dear @GuillaumeJasmin thank you for this amazing hoc component, it's really helpful

in development it's working properly but i'm facing a problem on build,

Failed to compile.
static/js/main.1b0ccaee.js from UglifyJs
SyntaxError: Unexpected token name «interface_key», expected punc «;» [./~/uniqid/index.js:18,0]

please i need help to fix this problem

thanks in advance

Hi. Excellent library . Maybe you create react hooks version in future?

Currently, fixed columns doesn't work well with sub component.

Tests and improvement are needed.

See #2 (comment)

Testing the demo, and stepping through the code, it doesn't look like there is any way to constrain the width. Is that right, or did I miss something?

This line leads to the creation of a new body when calling the render function

TbodyComponent={propsTBody =>(
    <div><DefaultReactTable.defaultProps.TbodyComponent {...propsTBody} /></div>
)}

Array.prototype.includes which is used by this project is available from ES7 onward. Wouldn't it be a good idea to mention that in the README?

I had to spend some time (not more than 10mins) to figure this out and include the es7-shim in my project.

Hi,

first of all, thank you very much for this HOC.
I am facing a problem with edge where the column header does not stay fixed.
To make sure it wasn't a problem with my code, I tried the sample from sandbox (https://codesandbox.io/s/jnjv6j495y) and faced the same problem (the columns header "First Name" and "Last Name" as well as "Status" do not stay fixed).

Edge version: Microsoft Edge 42.17134.1.0
react-table-hoc-fixed-columns: 1.0.1

Thank you.
Cheers

It's pretty easy to replicate on the sandbox demo site - https://codesandbox.io/s/jnjv6j495y.

1. Set min-width:200px on .ReactTable .rt-th, .ReactTable .rt-td in the browsers' console.
2. Resize the First Name column
3. Move the horizontal scrollbar and see the Last Name column move and cover up the First Name column.

I don't think that's expected but let me know if it is, and how to keep get both First and Last name columns to remain fixed with min-widths.