Sticky Footer

[AppJarBiz]

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.

[mckervinc]

@AppJarBiz there isn't a sticky footer as of yet, but that's a feature I can definitely add!

[AppJarBiz]

@mckervinc , have you been able to make any progress on this? I can kind of hack around it by creating a 2nd one-row table below the first one, but they do not horizontal scroll in sync.

[adampash]

Fwiw, I was hoping for something similar — I need to be able to allow users to add a new item to the table. I can fake a footer at the bottom, and that's probably what I'll do, but it would be ideal if I could make it align with the last row in the table — sort of like how airtable does it (note the + sign).

[mckervinc]

@AppJarBiz @adampash this should be updated in version 0.4.4. let me know if this is expected

[AppJarBiz]

Thanks! However, it's unclear from the documentation how to make the footer a row that lines up with the rows from the rest of the table (for example a row of totals for all the columns)

[mckervinc]

@AppJarBiz ok I'll re-open. my first guess would be to expose the widths of each column as a property to the footerComponent. let me play around with it

[mckervinc]

@AppJarBiz ok updated the docs for version 0.4.6. this should be resolved (I hope!)

[AppJarBiz]

The widths are automatic so I'm not sure how I would even pass that to the footer component.

Ideally, the footer be defined by either one of the following:

1. The last element in the data[] array
2. A footerData =[] which is an array of values/cells that line up with the other data in the header row and data rows.

The widths would then just match the widths of the other rows.

[mckervinc]

@AppJarBiz ok so if im understanding you, are you saying that you cannot do the following:

interface CustomFooterProps extends FooterProps {
    rows: any[]
}

const CustomFooter = ({ data, widths }: CustomFooterProps) => {
  // widths is a number[] generated by the library. widths
  // gets calculated for you based on the window size, the table width,
  // and other properties.
  return (
    <div style={{ display: "flex" }}>
      {widths.map((w, i) => (
        <div className="some-class" style={{width: `${w}px` }}>
          {i === 0 ? calculateTotals(rows) : "Sample Text"}
        </div>
      )}
    </div>
}

and then use it like so:

const Component = () => {
  return (
    <Table
      data={data}
      columns={columns}
      footerComponent={props => <CustomFooter rows={data} {...props} />}
    />
  );
}

is that right? after I had pushed 0.4.6, i had the thought of including a footer property inside the column itself, similar to the header. but this should be a good stop-gap until I implement that

[AppJarBiz]

@mckervinc the sticky footer works great, thanks!

The syntax I used was:

const FooterCell = ({ val }) => {
   return (<div>{name}</div>);
}


const columns = [
		{
			key: "date",
			header: "Date",
			sortable: true,
			footer: (props) => <FooterCell val={`${..myDataRows.length} (Total)`} {...props} />,
		},
                ...

]

<Table>
        columns={columns}
	stickyFooter={true}
	footerStyle={{	height: "36px",	 ...myFooterStyle}}
        ...

[mckervinc]

@AppJarBiz im glad!