-
@@ -487,40 +528,40 @@ export default class Example31 extends React.Component {
-
-
+
@@ -528,22 +569,26 @@ export default class Example31 extends React.Component {
- OData Query: {this.odataQuery}
+ OData Query: {this.state.odataQuery}
-
-
Status: {this.status.text}
+
+ Status: {this.state.status.text}
-
this.reactGridReady($event.detail)}
- onGridStateChanged={$event => this.gridStateChanged($event.detail)} />
+ onGridStateChanged={$event => this.gridStateChanged($event.detail)}
+ onBeforeSort={$event => this.handleOnBeforeSort($event.detail.eventData)}
+ onBeforeSearchChange={$event => this.handleOnBeforeSearchChange($event.detail.eventData)}
+ onBeforePaginationChange={$event => this.handleOnBeforePaginationChange($event.detail.eventData)}
+ />
);
}
-}
+}
\ No newline at end of file
diff --git a/src/examples/slickgrid/example32.tsx b/src/examples/slickgrid/example32.tsx
index de55cb0c..27caed63 100644
--- a/src/examples/slickgrid/example32.tsx
+++ b/src/examples/slickgrid/example32.tsx
@@ -15,9 +15,10 @@ import {
SortComparers,
} from '@slickgrid-universal/common';
import { ExcelExportService } from '@slickgrid-universal/excel-export';
-
-import { ReactGridInstance, ReactSlickgridCustomElement } from '../../slickgrid-react';
import React from 'react';
+
+import BaseSlickGridState from './state-slick-grid-base';
+import { ReactGridInstance, ReactSlickgridComponent } from '../../slickgrid-react';
import './example32.scss'; // provide custom CSS/SASS styling
const NB_ITEMS = 5000;
@@ -76,47 +77,48 @@ const myCustomTitleValidator = (value: any, args: any) => {
};
interface Props { }
+interface State extends BaseSlickGridState {
+ isUsingDefaultResize: boolean;
+ isGridEditable: boolean;
+ complexityLevelList: Array<{ value: number; label: string; }>;
+}
-export default class Example32 extends React.Component {
+export default class Example32 extends React.Component
{
title = 'Example 32: Columns Resize by Content';
subTitle = `The grid below uses the optional resize by cell content (with a fixed 950px for demo purposes), you can click on the 2 buttons to see the difference. The "autosizeColumns" is really the default option used by SlickGrid-Universal, the resize by cell content is optional because it requires to read the first thousand rows and do extra width calculation.`;
-
- reactGrid!: ReactGridInstance;
- gridOptions!: GridOption;
- columnDefinitions: Column[] = [];
- dataset: any[] = [];
editQueue: any[] = [];
editedItems: any = {};
- isUsingDefaultResize = false;
- isGridEditable = true;
- isCompositeDisabled = false;
- isMassSelectionDisabled = true;
- complexityLevelList = [
- { value: 0, label: 'Very Simple' },
- { value: 1, label: 'Simple' },
- { value: 2, label: 'Straightforward' },
- { value: 3, label: 'Complex' },
- { value: 4, label: 'Very Complex' },
- ];
+ reactGrid!: ReactGridInstance;
constructor(public readonly props: Props) {
super(props);
- this.initializeGrid();
- this.componentDidMount();
+
+ this.state = {
+ gridOptions: undefined,
+ columnDefinitions: [],
+ isUsingDefaultResize: false,
+ isGridEditable: true,
+ complexityLevelList: [
+ { value: 0, label: 'Very Simple' },
+ { value: 1, label: 'Simple' },
+ { value: 2, label: 'Straightforward' },
+ { value: 3, label: 'Complex' },
+ { value: 4, label: 'Very Complex' },
+ ],
+ }
}
componentDidMount() {
document.title = this.title;
- // mock some data (different in each dataset)
- this.dataset = this.loadData(NB_ITEMS);
+ this.defineGrid();
}
reactGridReady(reactGrid: ReactGridInstance) {
this.reactGrid = reactGrid;
}
- initializeGrid() {
- this.columnDefinitions = [
+ defineGrid() {
+ const columnDefinitions: Column[] = [
{
id: 'title', name: 'Title', field: 'title', sortable: true, type: FieldType.string, minWidth: 65,
// you can adjust the resize calculation via multiple options
@@ -172,15 +174,15 @@ export default class Example32 extends React.Component {
id: 'complexity', name: 'Complexity', field: 'complexity',
resizeCalcWidthRatio: 0.9, // default calc ratio is 1 or ~0.9 for field type of string
sortable: true, filterable: true, columnGroup: 'Analysis',
- formatter: (_row, _cell, value) => this.complexityLevelList[value].label,
- exportCustomFormatter: (_row, _cell, value) => this.complexityLevelList[value].label,
+ formatter: (_row, _cell, value) => this.state.complexityLevelList[value].label,
+ exportCustomFormatter: (_row, _cell, value) => this.state.complexityLevelList[value].label,
filter: {
model: Filters.multipleSelect,
- collection: this.complexityLevelList
+ collection: this.state.complexityLevelList
},
editor: {
model: Editors.singleSelect,
- collection: this.complexityLevelList,
+ collection: this.state.complexityLevelList,
},
},
{
@@ -323,7 +325,7 @@ export default class Example32 extends React.Component {
},
];
- this.gridOptions = {
+ const gridOptions: GridOption = {
editable: true,
autoAddCustomEditorFormatter: customEditableInputFormatter,
enableCellNavigation: true,
@@ -375,7 +377,7 @@ export default class Example32 extends React.Component {
// composite editors values are saved as array, so let's convert to array in any case and we'll loop through these values
const prevSerializedValues = Array.isArray(editCommand.prevSerializedValue) ? editCommand.prevSerializedValue : [editCommand.prevSerializedValue];
const serializedValues = Array.isArray(editCommand.serializedValue) ? editCommand.serializedValue : [editCommand.serializedValue];
- const editorColumns = this.columnDefinitions.filter((col) => col.editor !== undefined);
+ const editorColumns = this.state.columnDefinitions.filter((col) => col.editor !== undefined);
const modifiedColumns: Column[] = [];
prevSerializedValues.forEach((_val, index) => {
@@ -384,7 +386,7 @@ export default class Example32 extends React.Component {
if (prevSerializedValue !== serializedValue) {
const finalColumn = Array.isArray(editCommand.prevSerializedValue) ? editorColumns[index] : column;
- this.editedItems[this.gridOptions.datasetIdPropertyName || 'id'] = item; // keep items by their row indexes, if the row got edited twice then we'll keep only the last change
+ this.editedItems[this.state.gridOptions?.datasetIdPropertyName ?? 'id'] = item; // keep items by their row indexes, if the row got edited twice then we'll keep only the last change
this.reactGrid.slickGrid.invalidate();
editCommand.execute();
@@ -401,6 +403,13 @@ export default class Example32 extends React.Component {
// when using the cellMenu, you can change some of the default options and all use some of the callback methods
enableCellMenu: true,
};
+
+ this.setState((state: State) => ({
+ ...state,
+ gridOptions,
+ columnDefinitions,
+ dataset: this.loadData(NB_ITEMS)
+ }));
}
loadData(count: number) {
@@ -499,12 +508,12 @@ export default class Example32 extends React.Component {
columns.forEach(col => col.width = col.originalWidth);
this.reactGrid.slickGrid.setColumns(columns);
this.reactGrid.slickGrid.autosizeColumns();
- this.isUsingDefaultResize = true;
+ this.setState((state: State) => ({ ...state, isUsingDefaultResize: true }));
}
handleNewResizeColumns() {
this.reactGrid.resizerService.resizeColumnsByCellContent(true);
- this.isUsingDefaultResize = false;
+ this.setState((state: State) => ({ ...state, isUsingDefaultResize: false }));
}
toggleGridEditReadonly() {
@@ -512,13 +521,11 @@ export default class Example32 extends React.Component {
this.undoAllEdits();
// then change a single grid options to make the grid non-editable (readonly)
- this.isGridEditable = !this.isGridEditable;
- this.isCompositeDisabled = !this.isGridEditable;
- if (!this.isGridEditable) {
- this.isMassSelectionDisabled = true;
- }
+ const isGridEditable = !this.state.isGridEditable;
+ this.setState((state: State) => ({ ...state, isGridEditable }));
+
// dynamically change SlickGrid editable grid option
- this.reactGrid.slickGrid.setOptions({ editable: this.isGridEditable });
+ this.reactGrid.slickGrid.setOptions({ editable: isGridEditable });
}
removeUnsavedStylingFromCell(_item: any, column: Column, row: number) {
@@ -823,7 +830,7 @@ export default class Example32 extends React.Component {
}
render() {
- return (
+ return !this.state.gridOptions ? '' : (
{this.title}
@@ -842,18 +849,18 @@ export default class Example32 extends React.Component {
diff --git a/src/examples/slickgrid/example4.tsx b/src/examples/slickgrid/example4.tsx
index 15c2f789..b0cee1c2 100644
--- a/src/examples/slickgrid/example4.tsx
+++ b/src/examples/slickgrid/example4.tsx
@@ -14,7 +14,7 @@ import {
MultipleSelectOption,
OperatorType,
ReactGridInstance,
- ReactSlickgridCustomElement,
+ ReactSlickgridComponent,
} from '../../slickgrid-react';
import BaseSlickGridState from './state-slick-grid-base';
@@ -385,7 +385,7 @@ export default class Example4 extends React.Component
{
Set Sorting Dynamically
- {
constructor(public readonly props: Props) {
super(props);
this.state = {
- gridOptions: {},
+ gridOptions: undefined,
columnDefinitions: [],
dataset: [],
- paginationOptions: null,
+ paginationOptions: undefined,
errorStatus: '',
- isCountEnabled: false,
+ isCountEnabled: true,
isSelectEnabled: false,
isExpandEnabled: false,
metrics: {} as Metrics,
status: {class:'', text:''},
- odataVersion: 0,
+ odataVersion: 2,
odataQuery:'',
processing:false,
isPageErrorTest:false
@@ -85,10 +89,11 @@ export default class Example5 extends React.Component {
}
reactGridReady(reactGrid: ReactGridInstance) {
+ console.log('reactGridReady', reactGrid)
this.reactGrid = reactGrid;
}
- getGridDefinition() {
+ getGridDefinition(): GridOption {
return {
enableAutoResize: true,
autoResize: {
@@ -130,32 +135,26 @@ export default class Example5 extends React.Component {
version: this.state.odataVersion // defaults to 2, the query string is slightly different between OData 2 and 4
},
onError: (error: Error) => {
- this.setState((state:State, props:Props)=>{
- return { ...state, errorStatus: error.message };
- });
+ this.setState((state: State) => ({ ...state, errorStatus: error.message }));
this.displaySpinner(false, true);
},
preProcess: () => {
- this.setState((state:State, props:Props)=>{
- return { ...state, errorStatus: '' };
- });
+ this.setState((state: State) => ({ ...state, errorStatus: '' }));
this.displaySpinner(true);
},
- process: (query) => {
- this.getCustomerApiCall(query);
- },
+ process: (query) => this.getCustomerApiCall(query),
postProcess: (response) => {
- this.setState((state: State, props: Props) => {
- return { ...state, metrics: response.metrics };
- });
+ this.setState(
+ (state: State) => ({ ...state, metrics: response.metrics }),
+ () => this.getCustomerCallback(response)
+ );
this.displaySpinner(false);
- this.getCustomerCallback(response);
}
} as OdataServiceApi
};
}
- getColumnDefinitions() {
+ getColumnDefinitions(): Column[] {
return [
{
id: 'name', name: 'Name', field: 'name', sortable: true,
@@ -181,32 +180,25 @@ export default class Example5 extends React.Component {
const columnDefinitions = this.getColumnDefinitions();
const gridOptions = this.getGridDefinition();
- this.setState((state:any, props:Props)=>{
- return {
+ this.setState((state: State) => ({
...state,
columnDefinitions,
gridOptions,
- };
- });
+ }));
}
displaySpinner(isProcessing: boolean, isError?: boolean) {
- this.setState((state:State, props:Props)=>{
- return { ...state, processing: isProcessing };
- });
+ this.setState((state: State) => ({ ...state, processing: isProcessing }));
+
if (isError) {
- this.setState((state:State, props:Props)=>{
- return { ...state, status: { text: 'ERROR!!!', class: 'alert alert-danger' } };
- });
+ this.setState((state: State) => ({ ...state, status: { text: 'ERROR!!!', class: 'alert alert-danger' } }));
} else {
- this.setState((state:State, props:Props)=>{
- return {
- ...state,
- status: (isProcessing)
- ? { text: 'loading', class: 'alert alert-warning' }
- : { text: 'finished', class: 'alert alert-success' }
- };
- });
+ this.setState((state: State) => ({
+ ...state,
+ status: (isProcessing)
+ ? { text: 'loading', class: 'alert alert-warning' }
+ : { text: 'finished', class: 'alert alert-success' }
+ }));
}
}
@@ -217,25 +209,18 @@ export default class Example5 extends React.Component {
if (this.state.isCountEnabled) {
totalItemCount = (this.state.odataVersion === 4) ? data['@odata.count'] : data['d']['__count'];
}
- this.setState((state: State, props: Props) => {
- return {
- ...state,
- paginationOptions: { ...state.gridOptions!.pagination, totalItems: totalItemCount } as Pagination
- };
- });
- if (this.state.metrics) {
- this.state.metrics.totalItemCount = totalItemCount;
- }
// once pagination totalItems is filled, we can update the dataset
- this.setState((state: State, props: Props) => {
- return {
+ this.setState((state: State) => ({
...state,
paginationOptions: { ...state.gridOptions!.pagination, totalItems: totalItemCount } as Pagination,
dataset: state.odataVersion === 4 ? data.value : data.d.results,
- odataQuery: data['query']
- };
- });
+ odataQuery: data['query'],
+ metrics: { ...state.metrics, totalItemCount }
+ }));
+
+ // Slickgrid-React requires the user to update pagination via this pubsub publish
+ this.reactGrid.eventPubSubService?.publish('onPaginationOptionsChanged', { ...this.state.gridOptions!.pagination, totalItems: totalItemCount } as Pagination, 1);
}
getCustomerApiCall(query: string) {
@@ -259,12 +244,7 @@ export default class Example5 extends React.Component {
const columnFilters = {};
if (this.state.isPageErrorTest) {
- this.setState((state:State, props:Props)=>{
- return {
- ...state,
- isPageErrorTest: false,
- };
- });
+ this.setState((state: State) => ({ ...state, isPageErrorTest: false }));
throw new Error('Server timed out trying to retrieve data for the last page');
}
@@ -387,6 +367,9 @@ export default class Example5 extends React.Component {
case 'lt': return filterTerm.toLowerCase() < searchTerm;
case 'gt': return filterTerm.toLowerCase() > searchTerm;
case 'ge': return filterTerm.toLowerCase() >= searchTerm;
+ case 'ends': return filterTerm.toLowerCase().endsWith(searchTerm);
+ case 'starts': return filterTerm.toLowerCase().startsWith(searchTerm);
+ case 'substring': return filterTerm.toLowerCase().includes(searchTerm);
}
}
});
@@ -425,6 +408,7 @@ export default class Example5 extends React.Component {
}
goToLastPage() {
+ console.log('goto last page', this.reactGrid.paginationService)
this.reactGrid.paginationService!.goToLastPage();
}
@@ -449,13 +433,10 @@ export default class Example5 extends React.Component {
}
throwPageChangeError() {
- this.setState((state:State, props:Props)=>{
- return {
- ...state,
- isPageErrorTest: true,
- };
- });
- this.reactGrid?.paginationService?.goToLastPage();
+ this.setState(
+ (state: State) => ({ ...state, isPageErrorTest: true }),
+ () => this.reactGrid?.paginationService?.goToLastPage()
+ );
}
// YOU CAN CHOOSE TO PREVENT EVENT FROM BUBBLING IN THE FOLLOWING 3x EVENTS
@@ -482,46 +463,29 @@ export default class Example5 extends React.Component {
// ---
changeCountEnableFlag() {
- this.setState((state:State, props:Props)=>{
- return {
- ...state,
- isCountEnabled: !this.state.isCountEnabled,
- };
- });
- this.resetOptions({ enableCount: this.state.isCountEnabled });
+ const isCountEnabled = !this.state.isCountEnabled;
+ this.setState((state: State) => ({ ...state, isCountEnabled }));
+ this.resetOptions({ enableCount: isCountEnabled });
return true;
}
changeEnableSelectFlag() {
- this.setState((state: State, props: Props) => {
- return {
- ...state,
- isSelectEnabled: !this.state.isSelectEnabled,
- };
- });
- this.resetOptions({ enableSelect: this.state.isSelectEnabled });
+ const isSelectEnabled = !this.state.isSelectEnabled;
+ this.setState((state: State) => ({ ...state, isSelectEnabled }));
+ this.resetOptions({ enableSelect: isSelectEnabled });
return true;
}
changeEnableExpandFlag() {
- this.setState((state: State, props: Props) => {
- return {
- ...state,
- isExpandEnabled: !this.state.isExpandEnabled,
- };
- });
- this.resetOptions({ enableExpand: this.state.isExpandEnabled });
+ const isExpandEnabled = !this.state.isExpandEnabled;
+ this.setState((state: State) => ({ ...state, isExpandEnabled }));
+ this.resetOptions({ enableExpand: isExpandEnabled });
return true;
}
setOdataVersion(version: number) {
- this.setState((state:State, props:Props)=>{
- return {
- ...state,
- odataVersion: version,
- };
- });
- this.resetOptions({ version: this.state.odataVersion });
+ this.setState((state: State) => ({ ...state, odataVersion: version }));
+ this.resetOptions({ version });
return true;
}
@@ -533,7 +497,7 @@ export default class Example5 extends React.Component {
}
render() {
- return (
+ return !this.state.gridOptions ? '' : (
{this.title}
@@ -575,76 +539,74 @@ export default class Example5 extends React.Component {
-
- this.reactGridReady($event.detail.args)}
- onGridStateChanged={$event => this.gridStateChanged($event.detail.args)}
+ paginationOptions={this.state.paginationOptions}
+ onReactGridCreated={$event => this.reactGridReady($event.detail)}
+ onGridStateChanged={$event => this.gridStateChanged($event.detail)}
onBeforeSort={$event => this.handleOnBeforeSort($event.detail.eventData)}
onBeforeSearchChange= {$event => this.handleOnBeforeSearchChange($event.detail.eventData)}
onBeforePaginationChange= {$event => this.handleOnBeforePaginationChange($event.detail.eventData)}
diff --git a/src/examples/slickgrid/example6.tsx b/src/examples/slickgrid/example6.tsx
index a327c5bf..70d84bd0 100644
--- a/src/examples/slickgrid/example6.tsx
+++ b/src/examples/slickgrid/example6.tsx
@@ -1,6 +1,6 @@
/* eslint-disable @typescript-eslint/no-unused-vars */
import { GraphqlService, GraphqlPaginatedResult, GraphqlServiceApi, } from '@slickgrid-universal/graphql';
-import i18next from 'i18next';
+import i18next, { TFunction } from 'i18next';
import * as moment from 'moment-mini';
import {
ReactGridInstance,
@@ -12,35 +12,30 @@ import {
MultipleSelectOption,
OperatorType,
SortDirection,
- ReactSlickgridCustomElement,
+ ReactSlickgridComponent,
} from '../../slickgrid-react';
import React from 'react';
import BaseSlickGridState from './state-slick-grid-base';
-
-const defaultPageSize = 20;
-const GRAPHQL_QUERY_DATASET_NAME = 'users';
-
-i18next.init({
- lng: 'en',
-}
-);
+import { withTranslation } from 'react-i18next';
interface Status { text: string, class: string }
-
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-interface Props { }
+interface Props {
+ t: TFunction;
+}
interface State extends BaseSlickGridState{
- graphqlQuery:string,
- isWithCursor:boolean,
- processing:boolean,
- selectedLanguage:string,
- metrics: Metrics,
+ graphqlQuery: string,
+ isWithCursor: boolean,
+ processing: boolean,
+ selectedLanguage: string,
+ metrics?: Metrics,
status: Status,
-
}
-export default class Example6 extends React.Component {
+const defaultPageSize = 20;
+const GRAPHQL_QUERY_DATASET_NAME = 'users';
+
+class Example6 extends React.Component {
title = 'Example 6: Grid with Backend GraphQL Service';
subTitle = `
Use it when you need to support Pagination with a GraphQL endpoint (for simple JSON, use a regular grid).
@@ -66,13 +61,13 @@ export default class Example6 extends React.Component {
const defaultLang = 'en';
this.state = {
- gridOptions: {},
+ gridOptions: undefined,
columnDefinitions: [],
dataset: [],
- metrics: null,
- processing:false,
+ metrics: undefined,
+ processing: false,
graphqlQuery: '',
- isWithCursor:false,
+ isWithCursor: false,
selectedLanguage: defaultLang,
status: {} as Status,
};
@@ -80,7 +75,7 @@ export default class Example6 extends React.Component {
i18next.changeLanguage(defaultLang);
}
- componentDidMount(): void {
+ componentDidMount() {
this.defineGrid();
}
@@ -89,6 +84,7 @@ export default class Example6 extends React.Component {
}
reactGridReady(reactGrid: ReactGridInstance) {
+ console.log('reactGridReady', reactGrid)
this.reactGrid = reactGrid;
}
@@ -159,7 +155,6 @@ export default class Example6 extends React.Component {
gridOptions
};
});
-
}
getGridOptions(){
@@ -230,12 +225,10 @@ export default class Example6 extends React.Component {
postProcess: (result: GraphqlPaginatedResult) => {
const metrics = result.metrics as Metrics;
- this.setState((state:any, props) => {
- return {
+ this.setState((state: State) => ({
...state,
metrics,
- };
- });
+ }));
this.displaySpinner(false);
}
@@ -243,7 +236,7 @@ export default class Example6 extends React.Component {
};
}
clearAllFiltersAndSorts() {
- if (this.reactGrid && this.reactGrid.gridService) {
+ if (this.reactGrid?.gridService) {
this.reactGrid.gridService.clearAllFiltersAndSorts();
}
}
@@ -256,7 +249,7 @@ export default class Example6 extends React.Component {
this.setState((state:any, props:any)=>{
return {
...state,
- status:newStatus,
+ status: newStatus,
processing: isProcessing,
};
});
@@ -295,11 +288,11 @@ export default class Example6 extends React.Component {
}
goToFirstPage() {
- this.reactGrid.paginationService!.goToFirstPage();
+ this.reactGrid?.paginationService!.goToFirstPage();
}
goToLastPage() {
- this.reactGrid.paginationService!.goToLastPage();
+ this.reactGrid?.paginationService!.goToLastPage();
}
/** Dispatched event of a Grid State Changed event */
@@ -308,7 +301,7 @@ export default class Example6 extends React.Component {
}
saveCurrentGridState() {
- console.log('GraphQL current grid state', this.reactGrid.gridStateService.getCurrentGridState());
+ console.log('GraphQL current grid state', this.reactGrid?.gridStateService.getCurrentGridState());
}
setFiltersDynamically() {
@@ -316,7 +309,7 @@ export default class Example6 extends React.Component {
const presetHighestDay = moment().add(20, 'days').format('YYYY-MM-DD');
// we can Set Filters Dynamically (or different filters) afterward through the FilterService
- this.reactGrid.filterService.updateFilters([
+ this.reactGrid?.filterService.updateFilters([
{ columnId: 'gender', searchTerms: ['female'], operator: OperatorType.equal },
{ columnId: 'name', searchTerms: ['Jane'], operator: OperatorType.startsWith },
{ columnId: 'company', searchTerms: ['acme'], operator: 'IN' },
@@ -326,7 +319,7 @@ export default class Example6 extends React.Component {
}
setSortingDynamically() {
- this.reactGrid.sortService.updateSorting([
+ this.reactGrid?.sortService.updateSorting([
// orders matter, whichever is first in array will be the first sorted column
{ columnId: 'billingAddressZip', direction: 'DESC' },
{ columnId: 'company', direction: 'ASC' },
@@ -336,16 +329,11 @@ export default class Example6 extends React.Component {
async switchLanguage() {
const nextLanguage = (this.state.selectedLanguage === 'en') ? 'fr' : 'en';
await i18next.changeLanguage(nextLanguage);
- this.setState((state:any, props:any)=>{
- return {
- ...state,
- selectedLanguage: nextLanguage,
- };
- });
+ this.setState((state: State) => ({ ...state, selectedLanguage: nextLanguage }));
}
render() {
- return (
+ return !this.state.gridOptions ? '' : (
{this.title}
@@ -363,24 +351,24 @@ export default class Example6 extends React.Component {
Status: {this.state.status.text}
- {!this.state.processing &&
+ {this.state.processing ?
- }
+ : ''}
-
@@ -390,30 +378,31 @@ export default class Example6 extends React.Component
{
-
- Locale:
+ Locale:
{this.state.selectedLanguage + '.json'}
- {this.state.metrics &&
- Metrics: {this.state.metrics.endTime} | {this.state.metrics.executionTime}ms |
- {this.state.metrics.totalItemCount}
- items
-
}
+ {this.state.metrics && <>Metrics:
+ {moment(this.state.metrics.endTime).format('YYYY-MM-DD HH:mm:ss')}
+ | {this.state.metrics.executionTime}ms
+ | {this.state.metrics.totalItemCount} items
+ }
+
-
@@ -428,14 +417,16 @@ export default class Example6 extends React.Component
{
- this.reactGridReady($event.detail.args)}
- onGridStateChanged= {$event => this.gridStateChanged($event.detail.args)}
+ onReactGridCreated={$event => this.reactGridReady($event.detail)}
+ onGridStateChanged={$event => this.gridStateChanged($event.detail)}
/>
);
}
}
+
+export default withTranslation()(Example6);
\ No newline at end of file
diff --git a/src/examples/slickgrid/example7.tsx b/src/examples/slickgrid/example7.tsx
index 07c6fa0b..fd6e8095 100644
--- a/src/examples/slickgrid/example7.tsx
+++ b/src/examples/slickgrid/example7.tsx
@@ -1,6 +1,6 @@
/* eslint-disable @typescript-eslint/no-unused-vars */
import React from 'react';
-import { ReactGridInstance, Formatter, SlickGrid, ReactSlickgridCustomElement } from '../../slickgrid-react';
+import { ReactGridInstance, Formatter, SlickGrid, ReactSlickgridComponent } from '../../slickgrid-react';
import BaseSlickGridState from './state-slick-grid-base';
const columnsWithHighlightingById: any = {};
@@ -51,7 +51,7 @@ export default class Example7 extends React.Component {
this.state = {
columnDefinitions: [],
dataset: [],
- gridOptions:{}
+ gridOptions: undefined
};
}
@@ -115,7 +115,7 @@ export default class Example7 extends React.Component {
getData() {
// Set up some test columns.
- const columnDefinitions = [];
+ const columnDefinitions: any[] = [];
for (let i = 0; i < 10; i++) {
columnDefinitions.push({
id: i,
@@ -196,7 +196,7 @@ export default class Example7 extends React.Component {
};
// mock a dataset
- const mockDataset = [];
+ const mockDataset: any[] = [];
for (let i = 0; i < 100; i++) {
const d = (mockDataset[i] = {});
(d as any)['id'] = i;
@@ -216,7 +216,7 @@ export default class Example7 extends React.Component {
}
render() {
- return (
+ return !this.state.gridOptions ? '' : (
{this.title}
@@ -230,11 +230,11 @@ export default class Example7 extends React.Component {
-
this.reactGridReady($event.detail.args)}
+ onReactGridCreated={$event => this.reactGridReady($event.detail)}
/>
);
diff --git a/src/examples/slickgrid/example8.scss b/src/examples/slickgrid/example8.scss
index 2942e9ff..aa6ef2fc 100644
--- a/src/examples/slickgrid/example8.scss
+++ b/src/examples/slickgrid/example8.scss
@@ -1,10 +1,9 @@
-
-$header-menu-button-border: 1px solid #cfcfcf;
-$header-menu-button-border-width: 0px 1px;
-$header-menu-button-icon: "\f0d7";
-$header-menu-button-width: 16px;
-$header-menu-button-padding: 10px 0 0 3px;
-$sort-indicator-hint-opacity: 0;
+$slick-header-menu-button-border: 1px solid #cfcfcf;
+$slick-header-menu-button-border-width: 0px 1px;
+$slick-header-menu-button-icon: "\f0d7";
+$slick-header-menu-button-width: 16px;
+$slick-header-menu-button-padding: 10px 0 0 3px;
+$slick-sort-indicator-hint-opacity: 0;
/* make sure to add the @import the SlickGrid Bootstrap Theme AFTER the variables changes */
@import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss';
@@ -24,4 +23,3 @@ $sort-indicator-hint-opacity: 0;
.italic {
font-style: italic;
}
-
diff --git a/src/examples/slickgrid/example8.tsx b/src/examples/slickgrid/example8.tsx
index 10f37a07..7130123e 100644
--- a/src/examples/slickgrid/example8.tsx
+++ b/src/examples/slickgrid/example8.tsx
@@ -1,19 +1,22 @@
/* eslint-disable @typescript-eslint/no-unused-vars */
-import i18next from 'i18next';
-import { ReactGridInstance, Column, Formatters, SlickDataView, SlickGrid, ReactSlickgridCustomElement } from '../../slickgrid-react';
+import i18next, { TFunction } from 'i18next';
+import { ReactGridInstance, Column, Formatters, SlickDataView, SlickGrid, ReactSlickgridComponent } from '../../slickgrid-react';
import './example8.scss'; // provide custom CSS/SASS styling
import React from 'react';
import BaseSlickGridState from './state-slick-grid-base';
+import { withTranslation } from 'react-i18next';
// eslint-disable-next-line @typescript-eslint/no-empty-interface
-interface Props { }
+interface Props {
+ t: TFunction;
+}
interface State extends BaseSlickGridState{
selectedLanguage:string,
visibleColumns: Column[]
}
-export default class Example8 extends React.Component {
+class Example8 extends React.Component {
title = 'Example 8: Header Menu Plugin';
subTitle = `
This example demonstrates using the Slick.Plugins.HeaderMenu plugin to easily add menus to colum headers.
@@ -45,7 +48,7 @@ export default class Example8 extends React.Component {
this.state = {
columnDefinitions: [],
dataset: [],
- gridOptions: {},
+ gridOptions: undefined,
selectedLanguage: i18next.language || 'en',
visibleColumns: []
};
@@ -123,7 +126,7 @@ export default class Example8 extends React.Component {
return columnDefinitions;
}
- getGridOptions(){
+ getGridOptions() {
return {
enableAutoResize: true,
enableHeaderMenu: true,
@@ -149,7 +152,6 @@ export default class Example8 extends React.Component {
}
defineGrid() {
-
const gridOptions = this.getGridOptions();
const columnDefinitions = this.getColumnDefinitions();
@@ -164,7 +166,7 @@ export default class Example8 extends React.Component {
getData() {
// Set up some test columns.
- const mockDataset = [];
+ const mockDataset: any[] = [];
for (let i = 0; i < 1000; i++) {
mockDataset[i] = {
id: i,
@@ -197,7 +199,7 @@ export default class Example8 extends React.Component {
}
render() {
- return (
+ return !this.state.gridOptions ? '' : (
{this.title}
@@ -211,19 +213,21 @@ export default class Example8 extends React.Component {
-
);
}
}
+
+export default withTranslation()(Example8);
\ No newline at end of file
diff --git a/src/examples/slickgrid/example9.tsx b/src/examples/slickgrid/example9.tsx
index 8612f82c..3cc26351 100644
--- a/src/examples/slickgrid/example9.tsx
+++ b/src/examples/slickgrid/example9.tsx
@@ -1,5 +1,7 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import i18next from 'i18next';
+import i18next, { TFunction } from 'i18next';
+import React from 'react';
+import { withTranslation } from 'react-i18next';
+
import {
ReactGridInstance,
ExtensionName,
@@ -8,20 +10,20 @@ import {
Formatters,
SlickDataView,
SlickGrid,
- ReactSlickgridCustomElement,
+ ReactSlickgridComponent,
} from '../../slickgrid-react';
-import React from 'react';
-import './example9.scss'; // provide custom CSS/SASS styling
import BaseSlickGridState from './state-slick-grid-base';
+import './example9.scss'; // provide custom CSS/SASS styling
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-interface Props { }
+interface Props {
+ t: TFunction;
+}
interface State extends BaseSlickGridState{
selectedLanguage:string,
}
-export default class Example9 extends React.Component {
+class Example9 extends React.Component {
title = 'Example 9: Grid Menu Control';
subTitle = `
This example demonstrates using the Slick.Controls.GridMenu plugin to easily add a Grid Menu (aka hamburger menu) on the top right corner of the grid.
@@ -51,7 +53,7 @@ export default class Example9 extends React.Component {
this.state = {
columnDefinitions: [],
dataset: [],
- gridOptions: {},
+ gridOptions: undefined,
selectedLanguage: defaultLang
};
}
@@ -217,7 +219,7 @@ export default class Example9 extends React.Component {
getData() {
// Set up some test columns.
- const mockDataset = [];
+ const mockDataset: any[] = [];
for (let i = 0; i < 500; i++) {
mockDataset[i] = {
id: i,
@@ -274,7 +276,7 @@ export default class Example9 extends React.Component {
}
render() {
- return (
+ return !this.state.gridOptions ? '' : (
{this.title}
@@ -290,22 +292,24 @@ export default class Example9 extends React.Component {
-
);
}
}
+
+export default withTranslation()(Example9);
\ No newline at end of file
diff --git a/src/slickgrid.scss b/src/slickgrid.scss
index 19c39446..218dd65d 100644
--- a/src/slickgrid.scss
+++ b/src/slickgrid.scss
@@ -1,2 +1,2 @@
/* make sure to add the @import the SlickGrid Bootstrap Theme AFTER the variables changes */
-@import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss';
+// @import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss';
diff --git a/src/styles.scss b/src/styles.scss
index 7c958bf7..9023fd51 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,5 +1,5 @@
/* make sure to add the @import the SlickGrid Bootstrap Theme AFTER the variables changes */
-@import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss';
+// @import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss';
.btn-group-xs > .btn, .btn-xs {
padding : 6px 2px;