In my web application I am using a Table from (material-ui/core/Table) is it possible to export it in excel or csv format? I cannot find anything from the documentation of material UI, except for using custom projects.
According to the Material-UI Table API, it doesn't offer that functionality.
I suggest you use Material-UI DataGrid to render tables as it offers the functionality of downloading the table as a csv file.
Here's the link to the DataGrid which has the functionality implemented using GridToolbar: https://material-ui.com/components/data-grid/export/
first lets import the library,
import { ExportCsv, ExportPdf } from '#material-table/exporters';
After Importing add the below thing to the material table options,
exportMenu: [{
label: 'Export PDF',
exportFunc: (cols, datas) => ExportPdf(cols, datas, 'myPdfFileName')
}, {
label: 'Export CSV',
exportFunc: (cols, datas) => ExportCsv(cols, datas, 'myCsvFileName')
}]
Related
I am writing a react application. A core requirement is that the application be completely dynamic and configurable, including choosing layouts, sections and fields, validation etc.
I have two UI. One is the config UI where the user can select the layout, sections, fields like what type of html component etc. Once this is saved, I get data as JSON where I need to draw the UI. This is my second UI. My concern is how do I structure the components to render the UI with the JSON data. The fields & sections will be same but the layout will be different based on what is been selected in the config UI. Below is the rough JSON schema.
{
title: "Test title",
layout: [
{
name: "layout-a"
},
sectionA: {
name: "breadcrumbs"
field: [
{
name: "test",
value: "test",
type: "text"
}
]
},
sectionB: {
name: "actions"
field: [
{
name: "Create",
value: "Create",
type: "button"
}
]
}
]
}
I was thinking of having a layout component which renders all the children from the JSON. Component looks like below
const Layout = ({ children }) => {
return (
<div>
<div className="container">
<div className="content">{children}</div>
</div>
</div>
);
};
and top level component where we read the config json and based on the layout render the component
<Layout>
{viewToShow === "layoutA" && <LayoutA data={config.sections} />}
{viewToShow === "layoutB" && <LayoutB data={config.sections} />}
</Layout>
My question is how do I construct the LayoutA, B or C component so that these sections and fields are rendered differently on the UI?
I think your question leaves a lot of unspecified points for us to offer you a proper solution. My advice is to investigate better what the project real needs are and its main goals, then lay out each piece (component) thoroughly checking what should be "configurable" and to which extent, before coming up with any implementation.
Taking your example "as is", my first thought is to wrap your App component into a Context provider, similar to what we'd do to manage themes.
export const layouts = {
layoutA: {
background: '#fff',
sectionWidth: '100%',
},
layoutB: {
background: '#000',
sectionWidth: '50%',
},
};
export const LayoutContext = React.createContext({
layout: layouts.layoutA, // default layout
toggleLayout: () => {},
})
You could then further populate the layouts object with metadata from a database. Supposing changes do not originate from the UI (think Webflow or Wix Editor), you could use a CMS to update the metadata and propagate the changes.
An example usage would be:
function LayoutTogglerButton() {
return (
<LayoutContext.Consumer>
{({ layout, toggleLayout }) => (
<button
onClick={toggleLayout}
style={{ backgroundColor: layout.background }}>
Toggle Layout
</button>
)}
</LayoutContext.Consumer>
)
}
Again, there are a lot of unspecified points on your request for us to be more specific. The request for "an application to be completely dynamic and configurable, including choosing layouts, sections and fields, validation etc" could mean many things.
Examples of more specific questions: How to create dynamic forms in React with functional components? How to create drag and drop dashboard widgets with React? How to live update/customise themes with styled-components?
Perhaps you could be more specific? Cheers
I am researching a possibility to do something similar. An off the bat approach would look somewhat like this: https://codesandbox.io/s/still-sun-cecudh?file=/src/App.js
Then of course, where this the layout object will be generated and where the parsing will take place will dependent on your use case. I am going with context for layout object generation and a dedicated component for object tree traversal.
So I want to have a select widget where the options are based on some dynamic data that I have to query for. However, it seems that custom widgets break when importing useStaticQuery.
The below gives me "no control widget in the CMS". It works fine without the useStaticQuery import.
import React from 'react';
import { useStaticQuery, graphql } from "gatsby"
export class CustomControl extends React.Component {
render() {
return (
<div>
...
</div>
)
};
}
export const CustomPreview = (props) => {
return (
<div></div>
);
}
Generally, is there a best way/practice to go about creating a custom widget that can handle dynamic values?
Update:
I have tried the relation widget with no luck. I have existing data in a collection but can't seem to access it from the widget. Does someone have a working version of one I can go off of?
The collection that is meant to be the "data":
- label: Team
name: team
folder: 'src/pages/team'
create: true
fields:
- {label: 'Name', name: 'name', widget: string}
and the relation widget:
- label: 'Relation widget'
name: 'relationWidget'
widget: 'relation'
collection: 'team'
searchFields: ['name']
valueField: 'name'
displayFields: ['name']
With the NetlifyCMS structure, the best way to access other data is through the relation widget rather than a query.
However, in order to actually see this working, the site needs to be live. You can't locally mock data. Meaning, you can't go to localhost:8000/admin and see the relation widget pull anything.
(This is kind of a hassle because you have to authenticate a user as well and rebuild the whole site just to see the one change. It seems like you should be able to either query or just run the CMS locally and mess around with it that way)
Update
In order to pass multiple values through a relation widget:
value_field: "{{value1}}-{{value2}}"
create a proxy server to run the CMS locally. This is still in beta at the moment for netlifyCMS but seems to work well.
https://www.netlifycms.org/docs/beta-features/
I'm trying to build a custom panel option editor in web app called Grafana, but am running into an error I suspect is no more than a React syntax issue.
195:15 error Component definition is missing display name react/display-name
export const optionsBuilder = (builder: PanelOptionsEditorBuilder<SVGOptions>) => {
return builder
.addBooleanSwitch({
category: ['SVG Document'],
path: 'svgAutoComplete',
name: 'Enable SVG AutoComplete',
description: 'Enable editor autocompletion, optional as it can be buggy on large documents',
})
.addCustomEditor({
category: ['SVG Document'],
path: 'svgSource',
name: 'SVG Document',
description: `Editor for SVG Document, while small tweaks can be made here, we recommend using a dedicated
Graphical SVG Editor and simply pasting the resulting XML here`,
id: 'svgSource',
defaultValue: props_defaults.svgNode,
editor: (props) => {
const grafanaTheme = config.theme.name;
return (
<MonacoEditor
language="xml"
theme={grafanaTheme === 'Grafana Light' ? 'vs-light' : 'vs-dark'}
value={props.value}
onChange={props.onChange}
/>
);
},
})
};
To use a custom panel option editor, use the addCustomEditor on the OptionsUIBuilder object in your module.ts file. Configure the editor to use by setting the editor property to the SimpleEditor component.
The tutorial in the Grafana Docs explains more about what I'm doing, but I believe the issue is just with the arrow function I use at line 195.
Is there a different way I should be retrieving my editor property?
I'm using ag-grid (angular) and I would like to export the select rows to CSV or Excel. From what i researched on documentation this feature seems to be possible only using an external button (yellow on image) and not from the export inside of the table (red underline in image).
Is this possible to export selected line through the table itself (red underline in image)?
I'm imagining a multi selection feature in table and if I've no elements selected so the ag-grid export all data and if i've some elements selected then the ag-grid only export the selected one.
This is possible and can be achieved defining your custom function under context menu:
indicate that you will customise your Context Menu:
var gridOptions = {
columnDefs: columnDefs,
getContextMenuItems: getContextMenuItems,
rowSelection: 'multiple',
...
};
define your action exportDataAsExcel and pass onlySelected: true param to reduce export lines:
function getContextMenuItems(params) {
var result = [
{
name: "Excel Export (.xlsx)",
action: () => params.api.exportDataAsExcel(
{onlySelected: true}
)
},
];
return result;
}
you don't need to remove all the menu elements as I did - more about Context Menu can be found in official ag-grid documentation
https://www.ag-grid.com/javascript-grid-context-menu/
You can also just change the default behavior by using the defaultCsvExportParams property. (https://www.ag-grid.com/javascript-data-grid/csv-export/#grid-properties)
var gridOptions = {
...
defaultCsvExportParams: {
onlySelected: true
},
...
};
They have a similar option for the Excel export (https://www.ag-grid.com/javascript-data-grid/excel-export-api/#excelexportparams)
I am trying to export Ext.Grid in excel or .xls but for some reason it will not fetch the data in Mac. The file is exported in .xlt format in windows and would not open in MS Office excel. Though the exported file has all the data when exported in Ubuntu and opened with Libre.
I am using the Ext.ux.Exporter as provided in the github. The file is Exporter-all.js which does all the work. I am really confused where am I going wrong?
This is the code on the excel export button,
var grid = new Ext.grid.GridPanel({
title: "Intersected Species Info",
store: stor,
width: 585,
height: 260,
stripeRows: true,
tbar: [],
columns: columns,
listeners: {
render: function (grid) {
grid.getSelectionModel().selectFirstRow();
}
}
});
var exportCSV = new Ext.ux.Exporter.Button({
component: grid,
text: 'Download CSV'
});
grid.getTopToolbar().add(exportCSV);
And this is from where I am importing the js file,
<script src="../exporter/Exporter-all.js" type="text/javascript"></script>
Where am I not correct?
That github repository you use is for ExtJS 3 if I'm not wrong. You can use this https://github.com/iwiznia/Ext.ux.Exporter instead.
Remember to replace Style.js inside excelFormatter folder, using this
Sorry to throw a bunch of links but this thread explains pretty well. You can also follow example here.