Comments (3)
Hi @djamez. In Svelte, it appears that Svelte and Vue do not recognise the Lit Element's (framework used to make Active Table) properties as attributes (syntax you are using for tableStyle) and instead immediately interprets them as actual properties.
Because of this you can't use the simple tableStyle='{"borderRadius": "10px"}' syntax and instead you need to change it to how the headerStyles
property is used:
Svelte (using a backtick ` to allow a multi-line string):
tableStyle={`{
"borderRadius": "10px",
"boxShadow": "rgb(172 172 172 / 17%) 0px 0.5px 1px 0px",
"width":"100%"
}`}
Vue:
:tableStyle="{
borderRadius: '10px',
boxShadow: 'rgb(172 172 172 / 17%) 0px 0.5px 1px 0px',
width: '100%',
}"
Let me know if this helps you.
from active-table.
Hi @djamez. In Svelte, it appears that Svelte and Vue do not recognise the Lit Element's (framework used to make Active Table) properties as attributes (syntax you are using for tableStyle) and instead immediately interprets them as actual properties. Because of this you can't use the simple tableStyle='{"borderRadius": "10px"}' syntax and instead you need to change it to how the
headerStyles
property is used:Svelte (using a backtick ` to allow a multi-line string):
tableStyle={`{ "borderRadius": "10px", "boxShadow": "rgb(172 172 172 / 17%) 0px 0.5px 1px 0px", "width":"100%" }`}
Vue:
:tableStyle="{ borderRadius: '10px', boxShadow: 'rgb(172 172 172 / 17%) 0px 0.5px 1px 0px', width: '100%', }"
Let me know if this helps you.
Yes, I can confirm that it works well in both Svelte and Vue when the attributes are applied this way.
from active-table.
Good to hear, I will close this issue and if you have any other issues or suggestions for improvements please create a new issue. Thanks!
from active-table.
Related Issues (20)
- how to sponsor HOT 2
- Embedding custom HTML inside table cells HOT 2
- Provide display options for columnType HOT 6
- not explaining the usage process HOT 4
- 'cell-update' event seems to return wrong details
- navigator is not defined when using with NextJs HOT 5
- Table becomes laggy when displaying a long table HOT 1
- ERROR: ResizeObserver loop completed with undelivered notifications.
- Restoring table with column types HOT 5
- CSV export is missing formatting options to be useful
- Improvement Suggestion: Change Cursor Type for Non-Editable Select Cells
- Custom buttons
- Data and display issues HOT 1
- Feature request: Range Selection and Copy Paste
- Component not loading inside Shadow DOM. Throws: Cannot read properties of null (reading 'offsetWidth')
- Non-editable table HOT 1
- Active table column options are not working
- Pasting on windows machine leaves "\r" at the end of each cell
- How to get inputted data HOT 6
- Persist table's column types HOT 1
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 active-table.