sz-tables
v1.14.22
Published
Sprava Zeleznic FE Module for tables includes advanced func. like paid MUI tables with option to have settings in DB
Downloads
4
Readme
SZ-TABLES
Tabulka pro zobrazení dat, původně část aplikace DCS.
INSTALACE
npm install git+ssh://[email protected]/spravazeleznic/sz-tables.git --legacy-peer-deps
npm install @emotion/[email protected] @emotion/[email protected] @mui/[email protected] @mui/[email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] --legacy-peer-deps
*(--legacy-peer-deps se používá kvůli drag & drop knihovně, která již nemá nové aktualizace)
NASTAVENÍ
Pole objektů. Příklad:
const defaultColumns = [{
headerName: "time",
visible: true,
headerNameCZ: tx(COLUMN.time),
sortDeactivated: true,
styles: { width: "5.4vw" },
// Sorting - no db
sorting: { val: false, asc: "desc", order: 0 },
}]
POUŽITÍ
* Příklad použití v App.js viz VÝVOJ SZ-TABLES níže
import { ListTable } from "sz-tables";
// do verze 1.3.5
import { makeOrderDefaults, makeColumnsSettings } from "sz-tables/dist/components/tables/services/tableData";
// od verze 1.4.0
// staré - změna cesty
import { makeOrderDefaults, makeColumnsSettings } from "sz-tables";
// nové
import { apiconnection, apiConnectionFake, apiconnectionSave } from "sz-tables";
SLOŽENÍ PROPSŮ Definice statů pro tabulku:
const [t0Columns, setT0Columns] = useState([]);
const [rows, setRows] = useState([]);
// if (!orderSettings) {
orderSettings = makeOrderDefaults(defaultColumns);
//}
setT0Columns(makeColumnsSettings(orderSettings, defaultColumns));
//} }, [authState.loading]);
**Tady je třeba:**<br />
1/ copy & paste <br />
2/ upravit orderSettings (načtení uživatelského nastavení tabulky z globalního statu/db)<br />
3/ definovat spuštění useEffectu ("authState.loading").<br />
<br />
**JSX**
```sh
<ListTable
loadingApi={loadingApi}
apiLoaded={apiLoaded}
dataLoading={authState.loading}
// List data props
columns={t0Columns}
setColumns={setT0Columns}
rows={rows}
// Modals props
memoizedHandleOpenModal={memoizedHandleOpenModal}
// User prop - email
user={authState.user}
// Column changes
tableColumnsUpdating={tableColumnsUpdating}
//callApi
callApi={callApi}
// row styles
rowStyles: {
backgroundColor: "lightgreen",
},
rowStylesRemainder: 2,
rowStylesRemainderModifier: -1,
/>
Příklad objektu:
{
date: "24. 08. 2022"
dateCreated: "2022-08-24T09:22:25.719+02:00"
destinationPath: "bad\\383051\\Meter_383051_016a5c_2102130030.abl.gz"
errorCount: 1
id: 54
name: "Meter_383051_016a5c_2102130030.abl.gz"
status: "Error"
time: "09:22:25"
}
Příklad funkce:
const tableColumnsUpdating = (updatedColumns) => {
setT0Columns(updatedColumns);
setContextColumnsOrder(dispatch, "T0", updatedColumns);
};
VÝVOJ
npm start
PUBLIKOVÁNÍ
npm run build