ovidijusparsiunas / active-table Goto Github PK
View Code? Open in Web Editor NEWFramework agnostic table component for editable data experience.
Home Page: https://activetable.io
License: MIT License
Framework agnostic table component for editable data experience.
Home Page: https://activetable.io
License: MIT License
This thread is used to troubleshoot an es6 module resolve compilation error that appears to affect some apps when using the react
package active-table-react
. The error bears some of the following syntax:
Module not found: Error: Can't resolve './utils/outerTableComponents/pagination/paginationInternalUtils' in '/Users/ovidijusparsiunas/Desktop/sample-projects/my-app/node_modules/active-table/dist' Did you mean 'paginationInternalUtils.js'? BREAKING CHANGE: The request './utils/outerTableComponents/pagination/paginationInternalUtils' failed to resolve only because it was resolved as fully specified (probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"'). The extension in the request is mandatory for it to be fully specified. Add the extension to the request.
I would like to translate elements of the table like +New, Delete and such. Is that possible?
Currently, the import functionality allows users to import various types of files when uploading data. I propose implementing a file type control feature to restrict users to upload only CSV files.
The proposed solution would involve adding a file type validation function that checks the uploaded file's format before processing it. If the uploaded file is not a CSV file, the importCSV function will return an error in order to control the error and improve the user experience
Thank you for considering this proposal.
Hi @OvidijusParsiunas, I tried using Activetable with NextJs to display a really long table (around 1000 lines) and the scrolling experience is laggy + my browser freezes after a minute or two. Do you have any advice on how to tackle this problem? Thanks
This is a sandbox example: https://codesandbox.io/p/sandbox/active-table-react-xlsx-forked-5z7y65?file=%2Fsrc%2Findex.tsx
You can try uploading this file and you'll see the UI become frozen:
mock long data.csv
Hi @OvidijusParsiunas,
Your library is awesome and I'm using it in my NextJs project. I got this error and I'm not sure if it's the error from my side or the library. The table works on the UI but I still got this error:
Component text font quickly changes after the component is loaded.
Hello, I encountered a problem while compiling my project. I don't know if it's because of me.
Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/vercel/path0/node_modules/active-table/dist/utils/outerTableComponents/pagination/paginationInternalUtils' imported from /vercel/path0/node_modules/active-table/dist/activeTable.js
--
04:57:24.692 | at new NodeError (node:internal/errors:405:5)
04:57:24.692 | at finalizeResolution (node:internal/modules/esm/resolve:327:11)
04:57:24.692 | at moduleResolve (node:internal/modules/esm/resolve:946:10)
04:57:24.693 | at defaultResolve (node:internal/modules/esm/resolve:1132:11)
04:57:24.693 | at nextResolve (node:internal/modules/esm/loader:163:28)
04:57:24.693 | at ESMLoader.resolve (node:internal/modules/esm/loader:835:30)
04:57:24.693 | at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
04:57:24.693 | at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:77:40)
04:57:24.694 | at link (node:internal/modules/esm/module_job:76:36) {
04:57:24.694 | code: 'ERR_MODULE_NOT_FOUND'
Hi @OvidijusParsiunas ,
When using the the 'cell-update' event listener:
While visually the last row of the table is always the one to be actually removed, the rowIndex should point to the original row in the data source, so in case we use "Sort Ascending"/"Sort Descending" we can still track the logical row that was deleted.
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/[email protected]/dist/activeTable.bundle.js" type="module"></script>
</head>
<body>
<active-table id="at"
data='[
["Planet", "Diameter", "Mass", "Moons", "Density"],
["Earth", 12756, 5.97, 1, 5514],
["Mars", 6792, 0.642, 2, 3934],
["Jupiter", 142984, 1898, 79, 1326]]'
></active-table>
<script>
var tableElementRef = document.getElementById("at");
tableElementRef.addEventListener('cell-update', (cellUpdate) => {
console.log(cellUpdate.detail);
});
</script>
</body>
</html>
Great work on the project so far. Kudos for your efforts.
Is there a way to interact with server data with active-table component.
will active-table work in SSR mode. for eg. can I render a page in sveltekit SSR mode with active-table component in it ?
Wish you good luck for your efforts.
Hello! Very nice library congrats! I really believe this table could become the standard with your capability to add dynamically columns and rows that many others lag, I would have some features to propose to make it shine over the competitors.
Range Selection: Being able to select rows, columns or ranges (squares of rows/colums) and copy paste them.
Do you have any schedule time to do releases? maybe we could also contact to do pull requests and help you?
Cheers!
Hello there :)
I just discovered a new bug in Chrome that breaks importCSV functionality, at least having my custom buttons and calling importCSV:
Console doesn't output any message.
Any guidance on this?
Hello,
I am working in Svelte-kit and trying to implement a table as part of my interface. The table is used to show a list of options and can be updated both programmatically and by the user directly changing things. In my endeavors I found a couple of issues which I would like to list here, some as ideas and others as bug reports.
First of all, when I first saw that you can pass the data as an attribute to the active-table component, I really hoped that this would work reactively in the spirit of Svelte! So I hoped that by doing:
<active-table data={mydata}/>
This would update the table whenever my data was programmatically updated, and update my data whenever the table was directly edited by the user. I understand that this might be too hard to do, but I will leave it here as an idea, as it would be an amazing feature to have. The closest I got, was to update the table, by hiding it and showing it again after myData
was updated. The problem with this, and this is what I consider the first bug, is that if you supply the data like this, the on****Update events do not seem to work at all!
So then I switched to using updateData() to update my data, and then the update events work fine, but I got another bug, which is that the displayAddNewColumn="false"
is no longer respected, and I always get the button to add new rows! Then I switched to updateStructure() which has much smoother update, but again the displayAddNewColumn="false"
is not respected. It seems that this only works if the data is passed as a property.
Finally, one thing that has been bugging me a lot, is the cell styling, and specifically the cell height! I wanted to remove the default padding, so that I can fit more cells in my screen. I did this by adding cellStyle='{"padding": "1px"}'
and the padding is indeed respected. But the height is not adjusted to match the new padding, so the cell content just moves to the top of the cell. I tried setting height=auto or even a fixed height=20px in different places (cellStyle, rootCell, row, table etc.) but nothing seems to work. Is there a way to make this work?
Thanks and sorry for bundling so many issues in one request, but I thought it might be better than spamming with different requests, especially as most issues are connected.
Hi there (again :D)
I am writing to request a new feature, specifically, I am interested in having the ability to add a filter to the select columns, allowing users to search for specific options in the dropdown list.
As it stands, the select columns are incredibly useful, but they can become unwieldy when there are many options to choose from. Having a filter would make it much easier for users to quickly locate the options they need.
Thank you for your time and consideration.
Thks 😃
create a detailed instructions document on workflow and usage methods
Hi,
I'm trying to use active-table in my Flask app by including the JS bundle in my HTML code but I get the following error:
activeTable.bundle.js:870 Uncaught SyntaxError: Unexpected token 'export' (at activeTable.bundle.js:870:10591)
Any idea why?
How hard would it be to implement passing css-classes to active-table for styling table elements? If you drop active-table into an existing design or use a css framework with utility classes (ie Tailwind) this would really help the DX. Really digging a lot of the design decisions of the lib otherwise! 👍
Hi.
The active-table-react
package works fine on a React 17 project but the package-lock.json
lists its dependency being react 18. I there any way to make that dependency fixed?
Hi, is there a way to re-render active table with let's say updated number of rows? From my attempts, it seems like it is not...please note I am far from expert :)
Based on user input, I would like to update the element with newly changed number of rows. Alternative would be to render the element not on page load, but after user interaction.
I tried adding manually rendering it by inserting active-table
using insertAdjacentElement
/insertAdjacentHTML
among other things, but no luck.
P.S.
Vanilla JS - no frameworks used
Hello there,
I'm currently using your library on Angular, and I'm encountering a couple of issues with the CSV export and import functionality.
Firstly, the exported CSV files are always named "table_data.csv" and there seems to be no way to modify the file name. Could you please consider adding an option to change the file name during export?
Secondly, when I import a CSV file, the headers are not maintained. Additionally, the documentation states that the importCSV function returns a ColumnsDetails object, but it does not seem to return anything at all. Is there a way to intercept the end of the import process so that I can modify the data to add my headers?
I appreciate your hard work on this library, and I would be grateful if you could please look into these issues and provide any guidance or assistance. Thank you very much!
Best regards,
Hi,
I'm trying to implement column type like this
const opts = ['a','b']
lineitems.customColumnTypes = [];
lineitems.customColumnTypes.push({
name: "Roba",
select: {
options: opts,
canAddMoreOptions: false
},
iconSettings: { reusableIconName: "select"}
})
That works if I call it directly, but when I want to get some data via api and then try to do the same thing in a separate method it doesn't.
How could I make options dynamic in selects. For the reference here is code I'm trying to implement in google scripts
<script>
const lineitems = document.getElementById("lineitems");
lineitems.data = [
["Roba", "Cijena", "Popust", "Količina", "Ukupno"],
["","","","",""],
];
// this line only fetches the data from google sheet and passes it to onGetProductsSuccess
google.script.run.withSuccessHandler(onGetProductsSuccess).withUserObject(lineitems).aGetProducts();
function onGetProductsSuccess(products, lineitems) {
const opts = ["a","b"]
//console.log(lineitems)
lineitems.customColumnTypes = [];
lineitems.customColumnTypes.push({
name: "Roba",
select: {
options: opts,
canAddMoreOptions: false
},
iconSettings: { reusableIconName: "select"}
})
products.forEach(function(product) {
lineitems.customColumnTypes[0].select.options.push(product[1])
});
// console.log(lineitems)
}
</script>
Yet that doesn't work.
Hey, great work on this plugin!
Here are some ideas that would improve usability for data entry
I would love to be able to disable making newline characters on Enter key input.
In the meantime I solved it by wrapping the active table element in this div:
<div on:keydown={handleInput}>
</div>
with the following javascript
function handleInput(event) {
if (event.keyCode == 13){
event.preventDefault(); }}
Additionally what would be great user experience are following customizable settings on what to do on Enter key:
See example for the result of all 3 features.
When trying to import a CSV file that has data with escaped commas, you get extra columns.
name,description
Test,"Hi, this doesn't work"
The table is built with two columns like this:
name | description
-----+--------------------
Test | Hi, this doesn't work
We get an extra column like this:
name | description |
-----+-------------|------------------
Test | Hi | this doesn't work
I'm implementing a data table with Active Table in my Next.js project, and I've started getting an error whenever trying to resize the width of my page.
Unhandled Runtime Error
TypeError: Cannot read properties of null (reading 'offsetWidth')
Call Stack
ParentResize.shouldRerenderTable
node_modules/active-table/dist/utils/render/parentResize.js (19:0)
ActiveTable.resizeCallback
node_modules/active-table/dist/utils/render/parentResize.js (25:0)
I've never used Lit before, but it seems like parentElement might not be defined on at
.
Adding tableStyle
appears to break in both Svelte and Vue. Svelte example below:
<main>
<h1>Active Table:</h1>
<active-table
displayAddNewColumn = false
displayAddNewRow=false
content={content}
frameComponentsStyles={JSON.stringify(frameComponentsStyles)}
headerStyles={'{"default":{"backgroundColor": "#d6d6d630"}}'}
+ tableStyle='{
+ "borderRadius": "10px",
+ "boxShadow": "rgb(172 172 172 / 17%) 0px 0.5px 1px 0px",
+ "width":"100%"
+ }'
/>
</main>```
A quick note for dynamically changing the component styling based on browser media specs.
Similar to the rest of events (onCellUpdate, onContentUpdate, etc.) it would be a very nice enhancement to have an event which would fire once the table is finally rendered and visible to the user.
Thank you for your work.
Is it possible to make an active-table non-editable using APIs?
Thanks for a great component! Surprisingly, one of the few out there that is actively being worked on.
A few notes about how I got this working in Vue 2 (you don't mention Vue version in your docs, but your sandbox example uses Vue 3, so maybe this is unique to Vue 2 or Nuxt 2):
JSON.stringify(content)
myself before passing it to <active-table>
as a prop, otherwise Vue will do its own serialization which is NOT JSON.columnDropdown
<active-table>
with <!-- eslint-disable vue/html-self-closing vue/attribute-hyphenation -->
(and enable
after) to silence these errors.Hey there,
I've been working with your library for table implementation and I've noticed something that could use a bit of improvement. When dealing with cells of type 'select' and the isCellTextEditable property set to false, I observed that the cursor remains a pointer when hovering over these cells. I think it would be more user-friendly if the cursor changed to 'not-allowed' or a similar style to indicate that the cell is not editable.
Making this adjustment would enhance the user experience by providing clearer visual feedback, especially when users try to interact with non-editable cells.
Could you consider making this change in an upcoming update? I believe it would make a positive difference in the usability of the library.
Thanks! :)
Hello,
I am trying to add active-table to my project but I get an error straight away. The installation (npm install active-table) worked fine, adding 7 packages. But as soon as I add the component to my page, i get the following:
Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'C:\Users\manioko\source\repos\NewUISvelte\node_modules\active-table\dist\utils\outerTableComponents\pagination\paginationInternalUtils' imported from C:\Users\manioko\source\repos\NewUISvelte\node_modules\active-table\dist\activeTable.js
at new NodeError (node:internal/errors:399:5)
at finalizeResolution (node:internal/modules/esm/resolve:226:11)
at moduleResolve (node:internal/modules/esm/resolve:839:10)
at defaultResolve (node:internal/modules/esm/resolve:1069:11)
at DefaultModuleLoader.resolve (node:internal/modules/esm/loader:305:12)
at DefaultModuleLoader.getModuleJob (node:internal/modules/esm/loader:156:32)
at ModuleWrap. (node:internal/modules/esm/module_job:76:33)
at link (node:internal/modules/esm/module_job:75:36) {
code: 'ERR_MODULE_NOT_FOUND'
}
Any idea what might be causing this? Apologies if I am missing something obvious... :/
Currently when you want to display a "$" sign or "%" you've got to change the raw data:
customColumnTypes='[
{
"name": "Custom type",
"customTextProcessing": {
"changeTextFunc": "(cellText) => `$${Number(cellText.replace(/[^0-9.-]+/g,\"\"))}`",
"changeStyleFunc": "(cellText) => {
const moneyNumber = Number(cellText.replace(/[^0-9.-]+/g,\"\"));
if (moneyNumber < 20) return {backgroundColor: `#ff3232`};
if (moneyNumber < 100) return {backgroundColor: `#ffff00`};
return {backgroundColor: `#00ac00`};
}"
}}]'
So for example 0.12 should show as 12%. However to get it working you need to change the actual value to 12%. This is bad when when you have to send it back to a server.
Recommendation for a "changeDisplayFunc" function. It would happen after changeTextFunc (for example cleaning data to only display numbers). In the example 0.12:
customColumnTypes='[
{
"name": "Percentage",
"customTextProcessing": {
"changeDisplayFunc": (cellText) => `${Number(cellText) * 100 }%`
}}]'
actually, this is a request instead of issue, Active-Table is a pretty good and stable enough table implementation. I love it
Hello guys,
I love your product!
This is good work. Really good work.
I've been searching for this exact thing for over 3 years.
Please tell me how I can sponsor.
Is there a way to render custom html inside table cells?
I am trying to use active-table to render a list page. The first column is supposed to have links that open another page.
Currently, the examples on the activetable.io website are all about rendering a table with data. I am not finding any example of a table with html inside the cells.
<ActiveTable
data={activeTableData}
tableStyle={{
width: '100%',
}}
displayAddNewColumn={false}
frameComponentsStyles={{
styles: {
default: {
// backgroundColor: 'pink'
}
}
}}
headerStyles={{
default: {
backgroundColor: 'pink'
}
}}
rowHoverStyles={{
style: {
backgroundColor: '#d6d6d630',
"transitionDuration": "0.1s"
}
}}
// stripedRows={{
// odd: {
// backgroundColor: ''
// },
// even: {
// backgroundColor: '#ebebeb7a'
// }
// }}
rowDropdown={{
displaySettings: {
isAvailable: false
},
canEditHeaderRow: false
}}
columnDropdown={{
displaySettings: {
// isAvailable: false
},
isInsertLeftAvailable: false,
isInsertRightAvailable: false,
// is
}}
filter={true}
isCellTextEditable={false}
allowDuplicateHeaders={false}
contentEditable={false}
displayAddNewRow={false}
/>
Using ActiveTable on React project. Sample code:
<ActiveTable
ref={activeTableRef}
tableStyle={{
"width": "100%"
}}
data={[
['Planet', 'Diameter', 'Mass'],
['Earth', 1, 1],
['Mars', 1, 1],
]}
/>
Resizing window quickly:
Uncaught runtime errors:
×
ERROR
ResizeObserver loop completed with undelivered notifications.
at handleError (http://localhost:3001/static/js/bundle.js:38010:58)
at http://localhost:3001/static/js/bundle.js:38029:7
Hi, NextJS newbie here. i found this table is very impressive.
May i ask how to get udpate whenever i type inside in the table?
<ActiveTable
onCellUpdate = {(cellUpdate) => { console.log(cellUpdate); }}
pagination={true}
displayAddNewColumn={false}
columnDropdown={{displaySettings: {isAvailable: false}}}
customColumnsSettings={[
{ "headerName": "Item", "cellStyle": {"backgroundColor": "#f8f8f8"}, "defaultColumnTypeName": "Select", "isHeaderTextEditable": false },
{ "headerName": "Description", "cellStyle": {"width": "150px"}, "isHeaderTextEditable": false },
{ "headerName": "Quantity", "cellStyle": {"backgroundColor": "#fdfdfd"}, "defaultColumnTypeName": "number", "isHeaderTextEditable": false },
{ "headerName": "Material", "cellStyle": {"backgroundColor": "#f1f1f1"}, "defaultColumnTypeName": "Select", "isHeaderTextEditable": false }
]}
tableStyle={{borderRadius: "10px", width:"100%"}}
content={content}
headerStyles={{ default: { backgroundColor: "#d6d6d630" } }}
/>
i did try to update using onCellUpdate but no feedback in the console unfortunately.
Hi,
While I see support for import/export buttons (https://activetable.io/docs/files/#FileButton), is it possible to create buttons with customized actions?
When the screen dimensions are small e.g. a phone screen, the tables inside the documentation are not displayed.
I would like to suggest a feature. When you have a select as a field type to be able to type and filter options.
When adding filter="true" to the active-table element in my sveltekit app, or a filter with an object or array of objects, it breaks the table. It should also be noted that the same thing happens on your sveltekit repo at https://codesandbox.io/p/sandbox/active-table-sveltekit-forked-fy9wlf
Hi @OvidijusParsiunas ,
I've a table like so
which, when exported, yields a CSV file (table_data.csv) that doesn't fully represent the data entered in the web component. I see the same problem when I access the table data using the method elementRef.getData()
: the data is incomplete.
Any idea why?
Javascript code for table creation:
make_active_table = function(activeTable, tableData) {
activeTable.data = tableData;
activeTable.setAttribute(
"tableStyle",
JSON.stringify({
"width":"100%", "boxShadow": "rgb(172 172 172 / 17%) 0px 0.5px 1px 0px", "borderRadius":"2px",
})
);
activeTable.setAttribute(
"files",
JSON.stringify({
"buttons": [
{
"import": true,
"styles": {
"default": {
"backgroundColor": "#46acff", "height": "19px", "padding": "7px 14px", "color": "white", "border": "unset"
},
"hover": {"backgroundColor": "#2b9cf8"}, "click": {"backgroundColor": "#198eef"}
},
"text": "Import File",
"position": "top-left",
"order": 1
},
{
"export": true,
"styles": {
"default": {
"backgroundColor": "#46acff", "height": "19px", "padding": "7px 14px", "color": "white", "border": "unset"
},
"hover": {"backgroundColor": "#2b9cf8"}, "click": {"backgroundColor": "#198eef"}
},
"text": "Export File",
"position": "top-left",
"order": 0
}
]
})
);
return activeTable;
}
HTML side:
<div id="billTableDiv">
<active-table id="billTable" headerStyles='{"default":{"backgroundColor": "#d6d6d630"}}'></active-table>
</div>
<button type="submit" class="btn btn-primary" onclick="beforeSubmit();">Save</button>
<script>
function beforeSubmit() {
const invalidForm = document.querySelector('form:invalid');
if (!invalidForm) {
$("#spinner").modal('show');
}
activeTable = document.getElementById("billTable");
document.getElementById("formField").value = JSON.stringify(activeTable.getData());
}
...
setTimeout(() => {
billTable = make_active_table(document.getElementById("billTable"), {{ bill_table|safe }})
});
</script>
I can save the table data but when trying to restore it for further editability I lose table details like column type. How can I get this info to save with the data so I can restore a table to its previous state?
Hey, the CSV export is doing a simple join(',')
on each row and a join('\n')
on all rows.
CSV actually supports (depending on the flavour different things including specifying the delimiter, having quoted fields, even having newlines in quoted fields and so on and so on.
To be useful I would at least say that we need an option to quote all fields and therefore "escape" the "
inside of a field..
Example:
const csvData = 'data:text/csv;charset=utf-8,' + at.data.map((e) => '"' + e.map((d) => d.replaceAll('"', '""')).join('","') + '"').join('\n');
It would be probably nice to expose a generic options element to the buttons: [{ export: {} }]
element, where you can configure this.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.