sz-tables v1.14.22

SZ-TABLES

Tabulka pro zobrazení dat, původně část aplikace DCS.

INSTALACE

npm install git+ssh://git@bitbucket.org/spravazeleznic/sz-tables.git --legacy-peer-deps
npm install @emotion/react@11.9.0 @emotion/styled@11.8.1 @mui/icons-material@5.10.6 @mui/material@5.10.6 array-move@4.0.0 axios@0.27.2 process@0.11.10 prop-types@15.8.1 react@18.2.0 react-dom@18.2.0 react-sortable-hoc@2.0.0 react-toastify@9.0.4 --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**
```bash
<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