mckervinc / react-fluid-table Goto Github PK

Use case is when you want the table rows to expand all the way across the table, for example by setting the width of a column to auto, however you don't want the auto width column to shrink into nothingness when collapsing.

I haven't looked at the code so I'm not sure if this is possible or not. Any thoughts?

Your project is awesome and i would like to use it.

In my case i need to have access to the scrollToItem method of the VariableSizeList.
Is it possible to implement an forewarded ref.

Maybe something like:

// Table.tsx
/**
 * The main table component
 */
const ListComponent = ({
  data,
  width,
  height,
  itemKey,
  rowHeight,
  className,
  forwardRef, // prop for forwarded ref
  ...rest
}: ListProps) => {
  // hooks
  const timeoutRef = useRef(0);
  const prevRef = useRef(width);
  const cacheRef = useRef<any>({});
  const listRef = forwardRef || useRef<any>(null); // use forwarded ref if given

// Example

const Example1 = () => {
  const testRef = useRef(null)
  return <Table forwardRef={testRef} data={testData} columns={columns} />;
}

I've tried this local and it worked for me but i am new to react, so i am not sure is this causes side effects.

Even with the width set to 100%.

Looking at previous versions it looks like this hasn't always been the case.

Per the documentation, we can write a custom component to colObj.header and that component will render. However, when I do something like :

const ColumnHeader = (props) => { 
  console.log(props)
  return <div
    // TODO: idk what is supposed to go here
    onClick={(e) => {}}
  >
    {/* TODO: idk what goes here... */}
    {props.header}
  </div>
}

const columns = [
  { key: "ID", header: <ColumnHeader text="ID" />, scope: "col"},
  { key: "FirstName", header: <ColumnHeader text="First Name" />, scope: "col"},
  { key: "LastName", header: <ColumnHeader text="Last Name" />, scope: "col"},
  { key: "Email", header: <ColumnHeader text="Email" />, scope: "col" }
];

and give that columns to the <Table>, nothing renders for the columns.

Why is this happening?

How can one add event such as onClick to an entire row? It is possible to enhance a cell through cell component when defining the columns but nothing for the entire row.

If I want to enhance the entire row, I have to do it on each cell to complete the entire row
I created a Cell Renderer that has onClick event for all the cells but the onClick event only works for a part of the cell. I need the onClick event on the row-container or on the cell

I think a cellWrapper or rowWrapper is needed where the entire row-container or cell-container can be enhanced by anyone for any purpose. e.g I might use the table, header, row and cell wrapper to convert my table to bootstrap table by changing the out from <div> to either <table>, <thead>, <tr> or <td> and also add events on them.

Is there a way to prevent the table from scrolling back to the top when it is re-rendered?

Basically, I'm rendering the table, moving away to a different "View", and back again. The table is re-rendered with the same data, but if it's a long table, then the scroll bar goes back to the top.

Any thoughts would be greatly appreciated! Great component btw!

Hello! I was trying to replace an old react-virtualized Table component with your module, which have a waaay cleaner API, and – unlike react-window – supports fixed headers and sorting out of the box.

However, I have run into an issue with the sorting functionality:

Expected Behavior

The sorting function sorts the actual data passed as the data prop.

Actual Behavior

The sorting function populates the Table component with data used for an initial render. Logging of the data from sorting function shows this stale prop. To get the actual, "fresh" data, I need to reload, or navigate to a route which does not utilize Table component.

Steps to Reproduce the Problem

I have run into this issue in the context of dependency-rich app, so there were multiple suspects. However, I was able to reproduce it in a pretty minimal code sandbox:

Code sandbox reproducing the issue

Specifications

Version: npm package v. 0.3.1

Hi there -

Create component!

I have a question. I'm trying to set a rowStyle

  const getRowStyle = (index: number) => {
      return {
          backgroundColor: "var(--theme-table-row-odd-bg)",
          borderLeft: "7px solid var($--theme-content-accent)",
        };
  }

...

...
rowStyle={getRowStyle}
...

but I loose the borderLeft style.

Any thoughts about why that could be?

Setting rowHeight has no effect on row height.

I see the column headers are frozen when vertical scrolling, but is it possible to freeze the first column when horizonal scrolling?

Hi, nice component. Do you have best practice to change column alignment, for number column that needs to be right aligned ?

Thanks

There needs to be a way to easily provide custom row styling (as opposed to doing something like styled-components, which a user could always use because the library takes in an optional className). This would follow basic react style guidelines. This is the proposal:

Prop
rowStyle

React.CSSProperties | (index: number) => React.CSSProperties

tableStyle

React.CSSProperties

headerStyle

React.CSSProperties

The rowStyle will be applied to each row (in particular the row-container). For example, someone could pass:

<Table {...otherProps} rowStyle={{ backgroundColor: 'green' }}/>

or

const rowStyle = index => ({ backgroundColor: index % 2 === 0 ? 'red' : 'green' }); 
<Table {...otherProps} rowStyle={rowStyle}/>

Thanks to @colemars for pointing this out!

Good day,

Do you have any intention of adding infinite loading or how do u think react-window-infinite-loader can be applied?

I don't want to rewrite a part of my app that I think infinite remote loading will solve the performance issue by breaking the data into chunks.

Is there any way to add a sticky footer?

I can add 2nd table after the original table and make the header contain footer data, but then it scrolls independently horizontally from the original table.

Hi there -

I'm trying to use your wonderful wee table. It works amazingly when you're resizing the Window, but I'm trying to use it with https://www.npmjs.com/package/flexlayout-react and find that when I maximize a tab, the Table dimensions do not get updated.

Any hints or tips on how to get the Table to re-layout with the new dimensions?

Thanks in advance.

I am using this project because I am not trying to hard-code in any table height. (I shouldn't have to hard-code anything but that's another story.)

I see in the docs that tableHeight is not required. However, per this CodeSandbox, it is (table won't render without it.