nodegui / react-nodegui

Build performant, native and cross-platform desktop applications with native React + powerful CSS like styling.🚀
https://react.nodegui.org
MIT License
6.18k stars 171 forks source link

Added Table, TableItem & ErrorPrompt #347

Closed KRTirtho closed 3 years ago

KRTirtho commented 3 years ago

Fixes #269

Added New Components:

Guidelines about Table are documented as comments & example are also shown via doc strings

Example (Table & TableItem):

function TableExample(){
return (
    <Table
          cellRange={{ row: 2, column: 2 }} // 2 x 2 = 4 cells total
          style="flex: 1;"
          horizontalHeaderLabels={["What", "How", "When"]}
          verticalHeaderLabels={["yes", "this", "later"]}
          hideRows={[0]} //hides the very first row
          hideColumns={[1]} //hides the second column
        >
          <TableItem cellPosition={[0, 0]} text="1" toolTip="Tooltip"/>
          <TableItem cellPosition={[0, 1]} text="2"/>
          <TableItem cellPosition={[1, 0]} text="3"/>
          <TableItem 
             cellPosition={[1, 1]} // position tuple [row, column]
             text="4"
             //makes the table item non-editable, non-selectable & only checkable
             //Focus on the "Bitwise OR (|)" operator
             flags={ItemFlag.ItemIsEnabled | ItemFlag.ItemIsUserCheckable} 
          />
      </Table>
  )
}

Also added warnings if wrong index was supplied for any row/column related prop

QErrorMessage is also a kind of dialog but for name I couldn't understand its a Dialog. The React wrapper for this is called ErrorPrompt. This one works same as Dialog | FileDialog | ColorDialog etc.. Works only if was wrapped/added as a child of View | BoxView just like all other Dialogs

Thanks @a7ul

a7ul commented 3 years ago

Thank you @KRTirtho