Comments (8)
A small trick that I use as a workaround maybe someone need is.
I do a wrapper div and then add the CSS with a selector:
const CLASSES = clsx(
"[&>div>table>tbody>tr>td]:!pb-2",
"[&>div>table>tbody>tr>td]:!pt-2",
"[&>div>table]:!h-96",
"[&>div.tremor-base.tr-absolute]:!bg-white",
"[&]:overflow-scroll h-96"
);
return (
<>
<div className={CLASSES}>
<Table>
<TableHead>
<TableRow>
<TableHeaderCell>Name</TableHeaderCell>
<TableHeaderCell textAlignment="text-left">Leads</TableHeaderCell>
<TableHeaderCell textAlignment="text-left">
Sales ($)
</TableHeaderCell>
<TableHeaderCell textAlignment="text-left">
Quota ($)
</TableHeaderCell>
<TableHeaderCell textAlignment="text-left">
Variance
</TableHeaderCell>
<TableHeaderCell textAlignment="text-left">
Region
</TableHeaderCell>
<TableHeaderCell textAlignment="text-left">
Status
</TableHeaderCell>
</TableRow>
</TableHead>
<TableBody>
{transactions.pages.map((item) => (
<>
{item.transactions.map((item) => (
<TableRow key={item.nameReferenzkonto}>
<TableCell>{item.nameReferenzkonto}</TableCell>
<TableCell textAlignment="text-left">
{item.verwendungszweck}
</TableCell>
<TableCell textAlignment="text-left">
{item.betrag}
</TableCell>
<TableCell textAlignment="text-left">
{item.waehrung}
</TableCell>
<TableCell textAlignment="text-left">
{item.buchungstag.toLocaleDateString()}
</TableCell>
<TableCell textAlignment="text-left">
{item.beguenstigterOrAuftraggeber}
</TableCell>
</TableRow>
))}
</>
))}
</TableBody>
</Table>
<Footer height="h-10">
<div className="w-full" />
<ButtonInline
size="sm"
text="Load more"
icon={ArrowRightIcon}
iconPosition="right"
handleClick={() =>
fetchNextPage({
pageParam:
transactions.pages[transactions.pages.length - 1]?.cursor,
})
}
/>
</Footer>
</div>
</>
);
from tremor.
because most of the components are nested, thus we would need to think about an appropriate design to implement this. We are currently discussing what level of customisation we would like to give to the user, as we want to find a balance between easy-to-use/good looking components vs customisation tailored to everyone's use case. Therefore we are gathering feedback from our users to determine which path to follow. So we are always happy for any sort of input on the library! 😊
Hi, is there a post on where tremor is going with the balance between "good looking" presets vs. customization with className
? I imagine exposing className
satisfies the customization needs, but what about the original intent of limiting customization for a good preset? I imagine that with className
, there is no balancing anymore because the customization is infinite. That being said, infinite customization is not mutually exclusive with offering presets either.
Just curious from the standpoint of designing a library, thank you! @mitrotasios
from tremor.
🎉 This issue has been resolved in version 2.0.0 🎉
The release is available on:
Your semantic-release bot 📦🚀
from tremor.
hi @wburningham, thanks a lot for the feedback! Unfortunately something like this is not possible at the moment, because we have defined interfaces with specific props for each component. Implementing a new prop such as className
is rather tricky (for now) because most of the components are nested, thus we would need to think about an appropriate design to implement this. We are currently discussing what level of customisation we would like to give to the user, as we want to find a balance between easy-to-use/good looking components vs customisation tailored to everyone's use case. Therefore we are gathering feedback from our users to determine which path to follow. So we are always happy for any sort of input on the library! 😊
from tremor.
To get the scrolling working with the sticky headers I did:
<div className="[&_>_div]:max-h-[42rem] [&_th]:bg-white">
<Table>
<TableHead>
...
Thanks for the tip @Johann01!
from tremor.
Thanks for the tip @Johann01, I think this may be a way of injecting dark mode classes for #208.
from tremor.
Relates to #135
from tremor.
At least need to edit the Card rounded and shadow classes
from tremor.
Related Issues (20)
- [UTs coverage]: Add UTs for AreaChart, BarChart, SparkAreaChart, Legend components HOT 1
- [Bug]: When Tooltip overlaps on surrounding charts, the zindex seems to be too low HOT 1
- [Bug]: The selected elements don't change their background color HOT 1
- BarList aligment HOT 5
- [Feature]: Progree bar color and background color HOT 1
- [Bug]: Select does not apply error styling in dark mode HOT 3
- [Bug]: TabGroup doesn't follow the colours defined in tailwind.config.ts HOT 8
- [Feature]: React 19 support HOT 1
- [Bug]: Legend component fails to render with 23 or more categories HOT 1
- [Feature]: Stacked Funnel Chart HOT 3
- [Feature]: Value Formatter for x-axis
- [Feature]: Padding for x axis
- [Feature]: Progress Circle with different color by sector HOT 1
- [Feature]: Add option to make the highlighted area a click target in a bar chart
- [Bug]: DateRangePicker z-index can't be changed HOT 1
- Barchart with Rounded Corners HOT 3
- Multiple charts on one plot
- [Bug]: Tremor Tabs not defaulting to value HOT 3
- [Question]: How can I increase the thickness of the donuts pie charts ? HOT 1
- [Feature]: adding phone input
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 tremor.