Devextreme-reactive: Fixed Header and Left / Right Column

[linuxhype]

Somewhat related to #293 but it's always so handy to have the ability to fix the tableheader during scrolling and fix a column to either the left or the right.

It's a simple CSS functionality but it's really powerful and often gives problems so would appreciate it being built-in functionality.

Just an idea ;)

[dispix]

Hi, is there any way to achieve a fixed header and/or footer since this issue popped up ? I think it's a must have that a lot of react tables are implementing.

[kvet]

Hi @dispix,

Have you seen the following demo: https://devexpress.github.io/devextreme-reactive/react/grid/demos/featured/virtual-scrolling/? It shows pinned header columns.

[linuxhype]

Yeah the headers are fine, it's really just the left or right column now. If we can get a pinned Left Column (for side scrolling) then all is well

[dispix]

@kvet Yes I saw the demo but I don't see anything in the code that points to how the header is fixed ?

[rao123dk]

Hi @kaatula @komarovalexander
As per your doc guidelines and with the help of your sandbox sample https://codesandbox.io/s/4xom180v14 .
I have used my own theme (neither BS3/BS4/material). Its works fine. But last problem is fixing header and left column.

could you please guide us?

[SergeyAlexeev]

Hi,

Would you please describe the problem in greater detail?

[rao123dk]

Thanks,
I have used DevExtreme React Grid with Custom Theme(i.e. without Bootstrap 3 or Bootstrap 4).
As per your Custom theme guidelines, and I have also got sample sandbox from your side for reference. . I have developed my complete table, thanks its working fine. But I got one last problem for fixing my header on top like you have implemented in virtual table.
Is there any doc or sample available where I can go through to fix my problem.

[SergeyAlexeev]

Thank you for the clarification. In your case, you need to implement the VirtualTable plugin instead of the Table one. Refer to our source code to see how it is implemented.

[devleopertest]

As you said Virtual table will fix table header fixing problem, thanks It works. But I have implemented table fixed header plugin same as https://github.com/DevExpress/devextreme-reactive/blob/master/packages/dx-react-grid-bootstrap3/src/templates/table-fixed-cell.jsx for the fixed first row in a table. But getting the error could you please provide a sample to us for references.

Note:- I am using typescript with own custom template.

[SergeyAlexeev]

What error did you get?

[devleopertest]

I thought I have messed up with TableFixedColumns. Could you please define what props should required? Please provide with a small code snippet.

 <TableFixedColumns
                    cellComponent={this.Cell}
                    leftColumns={['checkbox']}
                   rightColumn={[rColumns]}
                />

[devleopertest]

The main problem with me is the cellComponent structure. I am trying to refer from this link. But ??

[SergeyAlexeev]

As you can see in our  source code the TableFixedColumn plugin requires the FixedCell, TableInvisibleRow and TableListenerCell components. I should say these are internal components and their names and interfaces can be changed.
Currently, we don't provide TypeScript definitions for them for the same reason. Please refer to an updated sample for more details.
We have plans to add documentation that will describe how to create a custom theme. We are also working on TypeScript definition improvements for plugins and components.

[lock[bot]]

This thread has been automatically locked since it is closed and there has not been any recent activity. Please open a new issue for related bugs or feature requests.