Comments (11)
@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}}
...
from react-fluid-table.
@AppJarBiz there isn't a sticky footer as of yet, but that's a feature I can definitely add!
from react-fluid-table.
@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.
from react-fluid-table.
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).
from react-fluid-table.
@AppJarBiz @adampash this should be updated in version 0.4.4
. let me know if this is expected
from react-fluid-table.
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)
from react-fluid-table.
@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
from react-fluid-table.
@AppJarBiz ok updated the docs for version 0.4.6
. this should be resolved (I hope!)
from react-fluid-table.
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:
- The last element in the data[] array
- 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.
from react-fluid-table.
@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
from react-fluid-table.
@AppJarBiz im glad!
from react-fluid-table.
Related Issues (16)
- Add Custom Row Styling HOT 1
- Need for Row Component to enhance row events HOT 4
- ForwardRef to access the VariableSizeList methods HOT 4
- Row is re-mounting on resize. HOT 4
- Table rowHeight HOT 2
- How to custom column alignment ? HOT 3
- Infinite Loading HOT 2
- Possible to support min-width on rows? HOT 1
- Re-size table when a parent component changes HOT 1
- Question: unable to add additional styles to a row HOT 1
- Question: is there a way to prevent the table from scrolling back to the top when it is re-rendered? HOT 2
- Is there a way to freeze the first column HOT 1
- No support for no table height HOT 2
- No support for custom columnn HOT 2
- Sorting function is using stale data prop HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-fluid-table.