6 |
8 | );
9 |
10 | export default ColumnFeatures;
11 |
--------------------------------------------------------------------------------
/sample/src/ColumnFeatures/ModifyingColumns.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | import Button from '@material-ui/core/Button';
4 | import Snackbar from '@material-ui/core/Snackbar';
5 | import { LocalStorage, createColumn } from 'tubular-common';
6 | import { DataGrid } from '../../../src';
7 | import { ToolbarOptions } from '../../../src/Toolbar/ToolbarOptions';
8 | import columns from '../data/columns';
9 | import localData from '../data/localData';
10 |
11 | const ModifyingColumns: React.FunctionComponent = () => {
12 | const [getErrorMessage, setErrorMessage] = React.useState(null as string);
13 | const [gridColumns, setGridColumns] = React.useState(columns);
14 | const [columnCounter, setColumnCounter] = React.useState(0);
15 |
16 | const handleAddColumn = () => {
17 | setGridColumns([
18 | ...gridColumns,
19 | createColumn(`Column ${columnCounter}`, {
20 | filterable: true,
21 | searchable: true,
22 | sortable: true,
23 | }),
24 | ]);
25 |
26 | setColumnCounter(columnCounter + 1);
27 | };
28 |
29 | const handleDeleteLastColumn = () => {
30 | setGridColumns([...gridColumns.filter(c => c.name !== gridColumns[gridColumns.length - 1].name)]);
31 | };
32 |
33 | const toolbarOptions = new ToolbarOptions({
34 | customItems: (
35 |
36 |
37 |
38 |
39 | ),
40 | });
41 |
42 | return (
43 |
44 | {getErrorMessage && (
45 | {getErrorMessage}}
51 | />
52 | )}
53 |
62 | );
63 | };
64 |
65 | export default ModifyingColumns;
66 |
--------------------------------------------------------------------------------
/sample/src/CustomHttpClient.ts:
--------------------------------------------------------------------------------
1 | import { GridRequest, TubularHttpClientAbstract, TubularHttpClient } from 'tubular-common';
2 |
3 | export default class CustomHttpClient implements TubularHttpClientAbstract {
4 | public request: string | Request;
5 |
6 | public constructor(request: string | Request | TubularHttpClientAbstract) {
7 | this.request = TubularHttpClient.resolveRequest(request);
8 | }
9 |
10 | public async fetch(gridRequest: GridRequest): Promise<{}> {
11 | const response = await fetch(TubularHttpClient.getRequest(this.request, gridRequest));
12 | const data = await response.json();
13 | data.payload = data.Payload;
14 | delete data.Payload;
15 | data.payload = data.counter;
16 | delete data.counter;
17 | data.payload = data.CurrentPage;
18 | delete data.currentPage;
19 | // We simulate always one page
20 | data.totalPages = 1;
21 | data.totalRecordCount = 10;
22 | data.filteredRecordCount = 10;
23 |
24 | return data;
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/sample/src/CustomLayoutDataGrid.tsx:
--------------------------------------------------------------------------------
1 | import Card from '@material-ui/core/Card';
2 | import CardContent from '@material-ui/core/CardContent';
3 | import Paper from '@material-ui/core/Paper';
4 | import Snackbar from '@material-ui/core/Snackbar';
5 | import Table from '@material-ui/core/Table';
6 | import TableCell from '@material-ui/core/TableCell';
7 | import TableHead from '@material-ui/core/TableHead';
8 | import TableRow from '@material-ui/core/TableRow';
9 | import Typography from '@material-ui/core/Typography';
10 | import CheckBox from '@material-ui/icons/CheckBox';
11 | import CheckBoxOutlineBlank from '@material-ui/icons/CheckBoxOutlineBlank';
12 | import * as React from 'react';
13 | import { ColumnModel, parseDateColumnValue } from 'tubular-common';
14 | import { FixedLinearProgress } from 'uno-material-ui/dist/FixedLinearProgress';
15 | import { useResolutionSwitch } from 'uno-react/lib/hooks/useResolutionSwitch';
16 | import { TbRowProps } from '../../src/BareBones/TbRow';
17 | import { DataGridTable } from '../../src/DataGrid';
18 | import { MobileDataGridTable } from '../../src/DataGrid/MobileDataGridTable';
19 | import { Paginator } from '../../src/Pagination';
20 | import sampleColumns from './data/columns';
21 | import localData from './data/localData';
22 | import { useTbTable } from 'tubular-react-common';
23 |
24 | const CustomTbRow: React.FunctionComponent
42 |
43 | {column.name}:
44 |
45 |
46 | {row[column.name]}
47 |
48 |
49 | ))}
50 |
27 |
28 | Something went wrong.
29 |
30 |
38 | );
39 | }
40 | }
41 | export default ErrorBoundary;
42 |
--------------------------------------------------------------------------------
/sample/src/RemoteGridList.tsx:
--------------------------------------------------------------------------------
1 | import Button from '@material-ui/core/Button';
2 | import Card from '@material-ui/core/Card';
3 | import CardActions from '@material-ui/core/CardActions';
4 | import CardContent from '@material-ui/core/CardContent';
5 | import GridList from '@material-ui/core/GridList';
6 | import GridListTile from '@material-ui/core/GridListTile';
7 | import LinearProgress from '@material-ui/core/LinearProgress';
8 | import Paper from '@material-ui/core/Paper';
9 | import Table from '@material-ui/core/Table';
10 | import TableBody from '@material-ui/core/TableBody';
11 | import TableCell from '@material-ui/core/TableCell';
12 | import TableFooter from '@material-ui/core/TableFooter';
13 | import TableRow from '@material-ui/core/TableRow';
14 | import Typography from '@material-ui/core/Typography';
15 | import * as React from 'react';
16 | import { formatDate, LocalStorage } from 'tubular-common';
17 | import { Paginator, SearchTextInput } from '../../src';
18 | import CustomHttpClient from './CustomHttpClient';
19 | import columns from './data/columns';
20 | import { useTbTable } from 'tubular-react-common';
21 |
22 | const styles: any = {
23 | progress: {
24 | height: '20px',
25 | },
26 | search: {
27 | margin: '15px 10px 10px 10px',
28 | textAlign: 'right',
29 | },
30 | };
31 |
32 | const RemoteGridList: React.FunctionComponent = () => {
33 | const [getErrorMessage, setErrorMessage] = React.useState(null as string);
34 |
35 | const tbTableInstance = useTbTable(columns, 'https://tubular.azurewebsites.net/api/orders/paged', {
36 | storage: new LocalStorage(),
37 | componentName: 'RemoteGridList',
38 | });
39 |
40 | console.log(tbTableInstance);
41 | return (
42 |
31 |
32 |
33 |{this.state.error && this.state.error.toString()}
34 | {this.state.errorInfo.componentStack}
35 |
36 |
37 | 33 |
44 |
49 | {tbTableInstance.state.isLoading &&
50 |
64 |
94 | );
95 | };
96 |
97 | export default TbListExample;
98 |
--------------------------------------------------------------------------------
/sample/src/app.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { render } from 'react-dom';
3 |
4 | import createMuiTheme from '@material-ui/core/styles/createMuiTheme';
5 | import responsiveFontSizes from '@material-ui/core/styles/responsiveFontSizes';
6 | import ThemeProvider from '@material-ui/styles/ThemeProvider';
7 |
8 | import Main from './main';
9 |
10 | let theme = createMuiTheme();
11 | theme = responsiveFontSizes(theme);
12 |
13 | render(
14 |
65 |
68 |
90 |
69 |
78 |
89 |
91 |
93 |
38 | {getErrorMessage && (
39 | {getErrorMessage}}
45 | />
46 | )}
47 |
58 | );
59 | };
60 |
61 | export default LocalDataGrid;
62 |
--------------------------------------------------------------------------------
/sample/src/main.tsx:
--------------------------------------------------------------------------------
1 | import AppBar from '@material-ui/core/AppBar';
2 | import Tab from '@material-ui/core/Tab';
3 | import Tabs from '@material-ui/core/Tabs';
4 | import makeStyles from '@material-ui/styles/makeStyles';
5 |
6 | import * as React from 'react';
7 |
8 | import ColumnFeatures from './ColumnFeatures/ColumnFeatures';
9 | import CustomLayoutDataGrid from './CustomLayoutDataGrid';
10 | import ErrorBoundary from './ErrorBoundary';
11 | import LocalDataGrid from './localDataGrid';
12 | import MasterDetailRowSample from './masterDetailRowSample';
13 | import RemoteDataGrid from './remoteDataGrid';
14 | import RemoteGridList from './remoteGridList';
15 | import TbListExample from './TbListExample';
16 |
17 | const useStyles = makeStyles(({ palette }: any) => ({
18 | logo: {
19 | color: 'rgb(255, 255, 255)',
20 | display: 'block',
21 | height: 50,
22 | maxWidth: 150,
23 | width: 150,
24 | },
25 | root: {
26 | backgroundColor: palette.background.paper,
27 | display: 'flex',
28 | flexDirection: 'column',
29 | flexGrow: 1,
30 | height: '100%',
31 | },
32 | }));
33 |
34 | const Main: React.FunctionComponent = () => {
35 | const classes = useStyles({});
36 | const [currentValue, setValue] = React.useState(0);
37 |
38 | const handleChange = (event: any, value: any) => setValue(value);
39 |
40 | return (
41 |
43 |
44 | 
49 |
50 |
58 |
59 | {currentValue === 0 &&
67 | 
49 | This is a test with the row #{row.OrderID}
14 | );
15 |
16 | const MasterDetailRowSample: React.FunctionComponent = () => {
17 | const [getErrorMessage, setErrorMessage] = React.useState(null as string);
18 | const [data, setData] = React.useState(localData);
19 |
20 | const rowClick = (row: {}) => {
21 | console.log('You clicked on a row: ', row);
22 | };
23 |
24 | const handleAddRow = () => {
25 | setData([
26 | ...data,
27 | {
28 | Amount: 150.0,
29 | CustomerName: 'Tiempo Development',
30 | OrderID: 23,
31 | ShippedDate: '2016-01-04T18:00:00',
32 | ShipperCity: 'Monterrey, NL, Mexico',
33 | },
34 | ]);
35 | };
36 |
37 | const toolbarOptions = new ToolbarOptions({
38 | customItems: ,
39 | });
40 |
41 | return (
42 |
43 | {getErrorMessage && (
44 | {getErrorMessage}}
50 | />
51 | )}
52 |
64 | );
65 | };
66 |
67 | export default MasterDetailRowSample;
68 |
--------------------------------------------------------------------------------
/sample/src/remoteDataGrid.tsx:
--------------------------------------------------------------------------------
1 | import Button from '@material-ui/core/Button';
2 | import * as React from 'react';
3 | import { LocalStorage } from 'tubular-common';
4 | import { useGridRefresh } from 'tubular-react-common';
5 | import { DataGrid, ToolbarOptions } from '../../src';
6 | import columns from './data/columns';
7 | import Tooltip from '@material-ui/core/Tooltip';
8 | import IconButton from '@material-ui/core/IconButton';
9 | import DeleteIcon from '@material-ui/icons/Delete';
10 |
11 | const RemoteDataGrid: React.FunctionComponent = () => {
12 | const [refresh, forceRefresh] = useGridRefresh();
13 | const forceGridRefresh = () => forceRefresh();
14 |
15 | const rowClick = (row: any) => console.log('You clicked on a row: ', row);
16 |
17 | const toolbarButton = new ToolbarOptions({
18 | customItems: ,
19 | actionsArea: ({ selection }: any) => {
20 | return (
21 |
102 | {tbTableInstance.state.isLoading &&
104 |
158 | {tbTableInstance.state.isLoading &&
160 |
87 |
88 | {humanize(column.name)}:
89 |
90 |
91 | {columnRender(column, item)}
92 |
93 |
94 | ))}
95 |
34 | onChoiceChange(value)}
39 | >
40 |
49 |
50 | );
51 | };
52 |
--------------------------------------------------------------------------------
/src/Filtering/ChipBar.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { ColumnModel, columnHasFilter } from 'tubular-common';
3 | import { ChipFilter } from './ChipFilter';
4 |
5 | export interface ChipBarProps {
6 | columns: ColumnModel[];
7 | onClearFilter: (columnName: string) => void;
8 | }
9 |
10 | export const ChipBar: React.FunctionComponent
16 | {filteredColumns.map((column) => (
17 |
20 | );
21 | };
22 |
--------------------------------------------------------------------------------
/src/Filtering/ChipFilter.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { ColumnModel, ColumnDataType, CompareOperators } from 'tubular-common';
3 | import Chip from '@material-ui/core/Chip';
4 | import { getOperatorIcon } from './utils';
5 | import { makeStyles } from '@material-ui/core/styles';
6 | import CheckBoxIcon from '@material-ui/icons/CheckBox';
7 | import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
8 |
9 | export interface IChipFilterProps {
10 | column: ColumnModel;
11 | onRemoveFilter: (columnName: string) => void;
12 | }
13 |
14 | const convertToFriendlyDateString = (date: string | number) => new Date(date).toDateString();
15 |
16 | const getFilterText = (column: ColumnModel) => {
17 | const isDate =
18 | column.dataType === ColumnDataType.Date ||
19 | column.dataType === ColumnDataType.DateTime ||
20 | column.dataType === ColumnDataType.DateTimeUtc;
21 |
22 | const filterText = isDate ? convertToFriendlyDateString(column.filterText) : column.filterText;
23 |
24 | if (column.filterOperator === CompareOperators.Between) {
25 | let argument = column.filterArgument[0];
26 | if (isDate) {
27 | argument = convertToFriendlyDateString(argument);
28 | }
29 | return `${filterText} - ${argument}`;
30 | }
31 |
32 | if (column.dataType === ColumnDataType.Boolean) {
33 | return filterText === 'true' ? -
17 | {columns.map((column) => (
18 |
49 | {isAdvanced && (
50 |
51 |
53 | )}
54 |
55 |
57 |
58 | {isAdvanced &&
59 | pages.map((value) => (
60 | = Math.ceil(count / rowsPerPage) || isLoading}
64 | aria-label={Lang.translate('PageNum', value + 1)}
65 | color={value === page ? 'primary' : 'default'}
66 | >
67 | {value + 1}
68 |
69 | ))}
70 |
71 |
73 |
74 | {isAdvanced && (
75 |
76 |
78 | )}
79 |
80 | );
81 | };
82 |
--------------------------------------------------------------------------------
/src/Pagination/Paginator.tsx:
--------------------------------------------------------------------------------
1 | import { makeStyles } from '@material-ui/core/styles';
2 | import TablePagination from '@material-ui/core/TablePagination';
3 | import * as React from 'react';
4 | import { ITbTableInstance } from 'tubular-react-common';
5 | import { useResolutionSwitch } from 'uno-react';
6 | import { AdvancePaginationActions } from './AdvancePaginationActions';
7 | import Lang from '../utils/Lang';
8 |
9 | const useStyles = makeStyles({
10 | caption: {
11 | flexShrink: 1,
12 | height: '55px',
13 | },
14 | root: {
15 | height: '75px',
16 | maxWidth: '95%',
17 | },
18 | });
19 |
20 | const outerWidth = 800;
21 | const timeout = 400;
22 |
23 | const message = (totalRecordCount: number, filteredRecordCount: number) => ({ from, to, count }: any) =>
24 | totalRecordCount === filteredRecordCount
25 | ? Lang.translate('Pages', from, to, count)
26 | : filteredRecordCount === 0
27 | ? Lang.translate('NoRecords')
28 | : Lang.translate('TotalRecords', from, to, count, totalRecordCount);
29 |
30 | export interface PaginatorProps {
31 | tbTableInstance: ITbTableInstance;
32 | rowsPerPageOptions: number[];
33 | advancePagination: boolean;
34 | }
35 |
36 | export const Paginator: React.FunctionComponent{toolbarOptions.title}
} 71 | 72 | {toolbarOptions.customItems} 73 | {toolbarOptions.exportButton && ( 74 |{renderCellContent(column, row)}
);
44 |
45 | export const renderCells: any = (columns: ColumnModel[], row: any) =>
46 | columns
47 | .filter((col: ColumnModel) => col.visible)
48 | .map((column: ColumnModel) => (
49 |