Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mastro-elfo/crosstable
Crosstable component for @mui/material
https://github.com/mastro-elfo/crosstable
mui mui-material react react-typescript reactjs typescript vite vitest
Last synced: 12 days ago
JSON representation
Crosstable component for @mui/material
- Host: GitHub
- URL: https://github.com/mastro-elfo/crosstable
- Owner: mastro-elfo
- License: mit
- Created: 2024-04-18T21:34:24.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-05-18T14:42:54.000Z (8 months ago)
- Last Synced: 2024-12-19T14:49:56.346Z (21 days ago)
- Topics: mui, mui-material, react, react-typescript, reactjs, typescript, vite, vitest
- Language: TypeScript
- Homepage: https://mastro-elfo.github.io/crosstable/
- Size: 4.1 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://github.com/mastro-elfo/crosstable/actions/workflows/publish.yml)
# CrossTable
# Install
```
yarn add mui-crosstable
```
```
npm i mui-crosstable
```
# Usage
Type `CustomTeam` must extend `{ id: number | string }`.
```tsx
import CrossTable from "mui-crosstable";
function CrossTablePage(){
return (
teams={LIST_OF_TEAMS}
diagonalProps={{}}
renderDiagonal={(team) => "/"}
renderResult={(team1, team2) => getResultBetween(team1, team2)}
renderTeamName={(team) => getTeamName(team)}
renderShortTeamName={(team) => getShortTeamName(team)}
i18n={ teams: translate("Teams") }
resultCellProps={{}}
shortTeamNameCellProps={{}}
tableCellProps={{}}
tableContainerProps={{}}
tableHeadCellProps={{}}
tableProps={{}}
teamNameCellProps={{}}
/>
);
}
```
# Properties
Type `Team` extends `{ id: number | string }`.
| property | type | description |
| ---------------------- | ------------------------------------------------------------------ | ---------------------------------------------------------------- |
| teams | mandatory, `Team[]` | List of teams or players |
| diagonalProps | optional, `Omit` | Properties applied to each diagonal `TableCell` |
| renderDiagonal | optional, `(primary: Team) => ReactNode` | Called to render the content of a diagonal cell |
| renderResult | optional, `(primary: Team, secondary: Team) => ReactNode` | Called to render the result between two teams |
| renderTeamName | optional, `(team: Team) => ReactNode` | Called to render the team name |
| renderShortTeamName | optional, `(team: Team) => ReactNode` | Called to render the short version of the name |
| i18n | optional, `{teams: string;}` | Override the default texts |
| resultCellProps | optional, `Omit` | Properties applied to each `TableCell` with results |
| shortTeamNameCellProps | optional, `Omit` | Properties applied to each `TableHeadCell` with team short names |
| tableCellProps | optional, `Omit` | Properties applied to each `TableCell` inside `TableBody` |
| tableContainerProps | optional, `Omit` | Properties applied to `TableContainer` |
| tableHeadCellProps | optional, `Omit, "children">` | Properties applied to each `TableHeadCell` |
| tableProps | optional, `Omit` | Properties applied to `Table` |
| teamNameCellProps | optional, `Omit` | Properties applied to each `TableCell` with team names |
# Release
1. Update package version
2. Commit/Push, eventually skipping CI