Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit ace3cef

Browse files
Vishnu-MoorthiVishnu-Moorthi
Vishnu-Moorthi
authored and
Vishnu-Moorthi
committed
Theme reference structure modified.
1 parent 1ca56ef commit ace3cef

File tree

5 files changed

+65
-62
lines changed

5 files changed

+65
-62
lines changed

‎README.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,16 @@ Syncfusion Grid component package is available at [pypi.org](https://pypi.org/pr
3131
pip install ej2-streamlit-grids
3232
```
3333

34+
## Add Syncfusion Grid Themes
35+
36+
You can change themes for the Syncfusion Grid component from CDN. Refer to [themes topic](https://ej2.syncfusion.com/react/documentation/appearance/theme/) to know more about built-in themes.
37+
38+
In this article, `Material` theme is applied to Grid component by default. To change various themes in Grid component. Refer to the below code-snippet.
39+
40+
```py
41+
props.theme = 'https://cdn.syncfusion.com/ej2/21.1.35/bootstrap5.css'
42+
```
43+
3444
## Add Syncfusion Grid component
3545

3646
Follow the below steps to add the Syncfusion Grid component to the Streamlit Python project:

‎ej2_streamlit_grids/__init__.py

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -168,7 +168,7 @@ def __init__(self, dataSource: pd.DataFrame):
168168
self.frozenRows = None
169169
self.gridLines = None
170170
self.editSettings = None
171-
self.theme = 'material'
171+
self.theme = 'https://cdn.syncfusion.com/ej2/21.1.35/material.css'
172172
self.__license_key = None
173173

174174
def registerLicense(self, key: str):

‎ej2_streamlit_grids/frontend/package.json

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,7 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6-
"@syncfusion/ej2-base": "^20.4.48",
7-
"@syncfusion/ej2-buttons": "^20.4.44",
8-
"@syncfusion/ej2-calendars": "^20.4.44",
9-
"@syncfusion/ej2-dropdowns": "^20.4.43",
10-
"@syncfusion/ej2-inputs": "^20.4.42",
11-
"@syncfusion/ej2-navigations": "^20.4.44",
12-
"@syncfusion/ej2-notifications": "^20.4.42",
13-
"@syncfusion/ej2-popups": "^20.4.44",
14-
"@syncfusion/ej2-react-grids": "^20.4.44",
15-
"@syncfusion/ej2-splitbuttons": "^20.4.42",
6+
"@syncfusion/ej2-react-grids": "*",
167
"@types/jest": "^24.0.0",
178
"@types/node": "^12.0.0",
189
"@types/react": "^16.9.0",

‎ej2_streamlit_grids/frontend/src/ej2-grid.tsx

Lines changed: 52 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,8 @@ interface State {
1515
*/
1616
export class EJ2Grid extends StreamlitComponentBase<State> {
1717

18-
constructor(props: any) {
18+
constructor(props: any) {
1919
super(props);
20-
import('./themes/' + this.props.args.params.theme +'.css');
2120
this.state = { refreshed: 1 }
2221
}
2322

@@ -82,54 +81,57 @@ export class EJ2Grid extends StreamlitComponentBase<State> {
8281

8382

8483
return (
85-
<GridComponent ref={grid => this.gridInstance = grid}
86-
dataSource={ this.props.args.params.data }
87-
toolbar={ this.props.args.params.toolbarItems }
88-
toolbarClick={this.toolbarClick.bind(this)}
89-
allowExcelExport={ this.props.args.params.allowExcelExport }
90-
allowKeyboard={ this.props.args.params.allowKeyboard }
91-
allowMultiSorting={ this.props.args.params.allowMultiSorting }
92-
allowPdfExport={ this.props.args.params.allowPdfExport }
93-
allowReordering={ this.props.args.params.allowReordering }
94-
allowRowDragAndDrop={ this.props.args.params.allowRowDragAndDrop }
95-
allowSelection={ this.props.args.params.allowSelection }
96-
allowTextWrap={ this.props.args.params.allowTextWrap }
97-
enableAdaptiveUI={ this.props.args.params.enableAdaptiveUI }
98-
enableColumnVirtualization={ this.props.args.params.enableColumnVirtualization }
99-
enableHeaderFocus={ this.props.args.params.enableHeaderFocus }
100-
enableHover={ this.props.args.params.enableHover }
101-
enableImmutableMode={ this.props.args.params.enableImmutableMode }
102-
enableInfiniteScrolling={ this.props.args.params.enableInfiniteScrolling } infiniteScrollSettings={ this.props.args.params.infiniteScrollSettings }
103-
enablePersistence={ this.props.args.params.enablePersistence }
104-
enableStickyHeader={ this.props.args.params.enableStickyHeader }
105-
enableVirtualMaskRow={ this.props.args.params.enableVirtualMaskRow }
106-
enableVirtualization={ this.props.args.params.enableVirtualization }
107-
showColumnChooser={ this.props.args.params.showColumnChooser }
108-
showColumnMenu={ this.props.args.params.showColumnMenu }
109-
childGrid={ this.props.args.params.childGrid }
110-
editSettings={ this.props.args.params.editSettings }
111-
allowGrouping={ this.props.args.params.allowGrouping } groupSettings={ this.props.args.params.groupSettings }
112-
allowPaging={ this.props.args.params.allowPaging } pageSettings={ this.props.args.params.pageSettings }
113-
allowFiltering={ this.props.args.params.allowFiltering } filterSettings={ this.props.args.params.filterSettings }
114-
allowSorting={ this.props.args.params.allowSorting } sortSettings={ this.props.args.params.sortSettings }
115-
searchSettings={ this.props.args.params.searchSettings }
116-
selectionSettings={ this.props.args.params.selectionSettings }
117-
textWrapSettings={ this.props.args.params.textWrapSettings }
118-
allowResizing={ this.props.args.params.allowResizing }
119-
height={ this.props.args.params.height }
120-
width={ this.props.args.params.width }
121-
rowHeight={ this.props.args.params.rowHeight }
122-
rowRenderingMode={ this.props.args.params.rowRenderingMode }
123-
selectedRowIndex={ this.props.args.params.selectedRowIndex }
124-
printMode={ this.props.args.params.printMode }
125-
frozenColumns={ this.props.args.params.frozenColumns }
126-
gridLines={ this.props.args.params.gridLines }
127-
frozenRows={ this.props.args.params.frozenRows }>
128-
<ColumnsDirective>
129-
{totalColumns}
130-
</ColumnsDirective>
131-
<Inject services={[Page, Sort, Filter, Group, Toolbar, InfiniteScroll, ExcelExport, PdfExport, Reorder, Resize, RowDD, Edit, Freeze, Search, DetailRow, ColumnChooser, ColumnMenu]} />
132-
</GridComponent>
84+
<>
85+
<link rel="stylesheet" href={this.props.args.params.theme} />
86+
<GridComponent ref={grid => this.gridInstance = grid}
87+
dataSource={this.props.args.params.data}
88+
toolbar={this.props.args.params.toolbarItems}
89+
toolbarClick={this.toolbarClick.bind(this)}
90+
allowExcelExport={this.props.args.params.allowExcelExport}
91+
allowKeyboard={this.props.args.params.allowKeyboard}
92+
allowMultiSorting={this.props.args.params.allowMultiSorting}
93+
allowPdfExport={this.props.args.params.allowPdfExport}
94+
allowReordering={this.props.args.params.allowReordering}
95+
allowRowDragAndDrop={this.props.args.params.allowRowDragAndDrop}
96+
allowSelection={this.props.args.params.allowSelection}
97+
allowTextWrap={this.props.args.params.allowTextWrap}
98+
enableAdaptiveUI={this.props.args.params.enableAdaptiveUI}
99+
enableColumnVirtualization={this.props.args.params.enableColumnVirtualization}
100+
enableHeaderFocus={this.props.args.params.enableHeaderFocus}
101+
enableHover={this.props.args.params.enableHover}
102+
enableImmutableMode={this.props.args.params.enableImmutableMode}
103+
enableInfiniteScrolling={this.props.args.params.enableInfiniteScrolling} infiniteScrollSettings={this.props.args.params.infiniteScrollSettings}
104+
enablePersistence={this.props.args.params.enablePersistence}
105+
enableStickyHeader={this.props.args.params.enableStickyHeader}
106+
enableVirtualMaskRow={this.props.args.params.enableVirtualMaskRow}
107+
enableVirtualization={this.props.args.params.enableVirtualization}
108+
showColumnChooser={this.props.args.params.showColumnChooser}
109+
showColumnMenu={this.props.args.params.showColumnMenu}
110+
childGrid={this.props.args.params.childGrid}
111+
editSettings={this.props.args.params.editSettings}
112+
allowGrouping={this.props.args.params.allowGrouping} groupSettings={this.props.args.params.groupSettings}
113+
allowPaging={this.props.args.params.allowPaging} pageSettings={this.props.args.params.pageSettings}
114+
allowFiltering={this.props.args.params.allowFiltering} filterSettings={this.props.args.params.filterSettings}
115+
allowSorting={this.props.args.params.allowSorting} sortSettings={this.props.args.params.sortSettings}
116+
searchSettings={this.props.args.params.searchSettings}
117+
selectionSettings={this.props.args.params.selectionSettings}
118+
textWrapSettings={this.props.args.params.textWrapSettings}
119+
allowResizing={this.props.args.params.allowResizing}
120+
height={this.props.args.params.height}
121+
width={this.props.args.params.width}
122+
rowHeight={this.props.args.params.rowHeight}
123+
rowRenderingMode={this.props.args.params.rowRenderingMode}
124+
selectedRowIndex={this.props.args.params.selectedRowIndex}
125+
printMode={this.props.args.params.printMode}
126+
frozenColumns={this.props.args.params.frozenColumns}
127+
gridLines={this.props.args.params.gridLines}
128+
frozenRows={this.props.args.params.frozenRows}>
129+
<ColumnsDirective>
130+
{totalColumns}
131+
</ColumnsDirective>
132+
<Inject services={[Page, Sort, Filter, Group, Toolbar, InfiniteScroll, ExcelExport, PdfExport, Reorder, Resize, RowDD, Edit, Freeze, Search, DetailRow, ColumnChooser, ColumnMenu]} />
133+
</GridComponent>
134+
</>
133135
)
134136
}
135137

‎setup.py

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
setuptools.setup(
44
name="ej2_streamlit_grids",
5-
version="0.0.1",
5+
version="1.0.0",
66
author="Syncfusion",
77
author_email="info@syncfusion.com",
88
url="https://www.syncfusion.com/",

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /